Explore our collection of 150+ developer tools, PDF editors, and image converters. Everything runs locally in your browser.
Ubify Media & Design Operations
UI/UX & DIGITAL MEDIA SPECIALISTS
About This Tool
This media composition tool binds external audio tracks to video clips directly inside your web browser. Rather than uploading heavy video files to cloud rendering farms, the application captures video frames and routes audio tracks through native browser Web APIs to export an integrated WebM video file.
### Browser Stream Compositing Architecture The compositing engine operates through the following client-side sequence: - **Video Frame Rendering:** The selected video element renders to an offscreen HTML5 `<canvas>` sized to the source video's natural dimensions ($W \times H$). A 30 frames-per-second video stream is captured via `canvas.captureStream(30)`. - **Web Audio Routing:** The external audio file is processed through a browser `AudioContext` using `createMediaElementSource(audio)` and connected to a `MediaStreamAudioDestinationNode`. - **Mode Selection:** - *Replace Mode:* The video element is muted (`video.muted = true`), discarding camera audio and pairing only the new soundtrack. - *Mix Mode:* Retains existing audio streams while layering the new external track. - **MediaRecorder Encoding:** The combined video and audio tracks are merged into a unified `MediaStream` and encoded in real time using `MediaRecorder` into `video/webm;codecs=vp9,opus` (or fallback `video/webm`). - **Blob Generation:** Once recording finishes, binary chunks compile into a local Blob URL for immediate download.
### Concrete Workflow Example 1. **Upload Video:** Select `presentation-screen.mp4` ($1280 \times 720$). 2. **Upload Audio:** Select recorded studio voiceover `narration.wav`. 3. **Select Mode:** Choose Replace to silence noisy room echo captured on the built-in webcam microphone. 4. **Process & Export:** Click Mux Audio & Video. The browser renders and records the synchronized composite stream and outputs a downloadable WebM file.
### Privacy and Local Processing Note All stream decoding, frame drawing, and encoding take place in your local browser memory. No media files, video frames, or audio recordings are uploaded to remote servers.
How to Use
- 1
Upload or drag your video file (MP4 or WebM) into the video dropzone.
- 2
Upload your audio soundtrack (WAV, MP3, or OGG) into the audio dropzone.
- 3
Choose your audio mode: Replace to substitute original audio or Mix to combine both.
- 4
Click Mux Audio & Video to render and encode the combined stream.
- 5
Preview the result and click Download Combined Video.
Frequently Asked Questions
Does this tool upload my video to a cloud server for processing?
No. The entire compositing and recording process runs in your browser memory using HTML5 Canvas capture and the MediaRecorder API.
What export format does this tool generate?
The tool exports a standard WebM video file encoded with VP9 video and Opus audio, compatible with all modern browsers and media players.
Can I mute noisy background camera noise when adding music?
Yes. Selecting Replace mode mutes the original video track completely and substitutes your new audio file.