Video & Audio Remixer / Dubber
Drop a video and an audio file. Set the volume of each. Hit render — the page outputs a new WebM with both audio tracks mixed onto the video. Web Audio + Canvas + MediaRecorder.
Set Video volume to 0% to fully replace the original soundtrack (true dub). Set New audio to 0% to keep the original. Mix anywhere in between for music-over-dialogue. Render duration = the video's duration; the new audio is looped / stopped / silenced after that point per the setting above.
How it works
Two media elements (video + audio) are routed through an AudioContext. Each goes through its own GainNode (volume slider), then merged into a MediaStreamDestination for the mixed audio. The video is also drawn frame-by-frame to a hidden canvas via requestAnimationFrame; canvas.captureStream(30) gives the video stream.
Render combines both streams into one MediaStream and pipes it to a MediaRecorder (preferring VP9 + Opus). Recording starts on Play, stops when the video's ended event fires — so output length = video length.
Browser support: Chrome / Edge / Firefox work cleanly. Safari has known issues with canvas.captureStream + audio stream combining; if the audio comes out missing on Safari, switch browser.