The latest articles on DEV Community by Code Master (@iamcodemaster). https://dev.to/iamcodemaster https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3905028%2Faf015b0c-7dfb-40b3-8daf-c22709da87f8.png https://dev.to/iamcodemaster en Code Master Wed, 29 Apr 2026 21:46:17 +0000 https://dev.to/iamcodemaster/how-i-used-ffmpegwasm-to-build-a-browser-based-audio-remover-dc3 https://dev.to/iamcodemaster/how-i-used-ffmpegwasm-to-build-a-browser-based-audio-remover-dc3 <p>I had a recurring frustration: I needed to mute a video before sharing it. Every tool I found either uploaded the file to a server, added a watermark, or required me to create an account.</p> <p>I know a single FFmpeg command handles this in milliseconds. But most people are not going to open a terminal for something like this.</p> <p>So I built <a href="https://remove-audio.com" rel="noopener noreferrer">Remove Audio</a> — a free, browser-based tool that strips the audio from any video, locally on the user's device.</p> <h2> The core idea </h2> <p>The whole thing runs on FFmpeg.wasm, a WebAssembly port of FFmpeg. When a user drops a video in, the browser downloads the WASM binary once and then runs FFmpeg entirely locally. Nothing leaves the device.</p> <p>The underlying operation is essentially:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>ffmpeg <span class="nt">-i</span> input.mp4 <span class="nt">-an</span> <span class="nt">-c</span>:v copy output.mp4 </code></pre> </div> <p><code>-an</code> drops the audio track. <code>-c:v copy</code> tells FFmpeg to copy the video stream without re-encoding, which means zero quality loss and fast processing even on large files.</p> <h2> Why not just use a server? </h2> <p>Server-side processing is simpler to build. But it has real downsides for the user:</p> <ul> <li>Their file travels over the network (slow for large videos)</li> <li>It lives on someone else's machine during processing</li> <li>You need infrastructure, storage, and bandwidth costs</li> </ul> <p>WebAssembly flips this. The compute happens on the user's machine. The only thing the server needs to serve is the WASM binary, which is cached after the first load.</p> <h2> What made it tricky </h2> <p><strong>Cross-origin isolation.</strong> FFmpeg.wasm requires SharedArrayBuffer, which requires the page to be cross-origin isolated. That means setting Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp response headers. This broke some third-party embeds and required careful workarounds.</p> <p><strong>Mobile Safari.</strong> iOS has stricter constraints on WASM memory and threading. I had to test and tune specifically for iPhone, where a lot of people do casual video editing.</p> <p><strong>Format handling.</strong> Remuxing MKV or MOV files while copying streams is not always straightforward. Some container formats need extra handling even when you are just copying the video stream directly.</p> <h2> What I shipped </h2> <p><a href="https://remove-audio.com" rel="noopener noreferrer">remove-audio.com</a> is free, no account required, works on Mac, Windows, iPhone, Android, and any modern browser. Supports MP4, MOV, MKV, AVI, and WEBM. Available in English, Spanish, French, German, and Dutch.</p> <p>If you are building something where users need silent video — content tools, training platforms, social media schedulers — this is something you can just point people to.</p> <p>Happy to answer questions about the FFmpeg.wasm integration or the COOP/COEP setup if anyone is curious.</p> webassembly javascript ffmpeg showdev