I tried to capture system audio in the browser. Here's what I learned.

#webdev #javascript #learning #api

I'm building LiveSuggest, a real-time AI assistant that listens to your meetings and gives you suggestions as you talk. Simple idea, right?

Turns out, capturing audio from a browser tab is... complicated.

The good news

Chrome and Edge support it. You use getDisplayMedia, the same API for screen sharing, but with an audio option:

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: { systemAudio: 'include' }
});

The user picks a tab to share, checks "Share tab audio", and boom — you get the audio stream. Works great for Zoom, Teams, Meet, whatever runs in a browser tab.

The bad news

Firefox? Implements getDisplayMedia but completely ignores the audio part. No error, no warning. You just... don't get audio.

Safari? Same story. The API exists, audio doesn't.

Mobile browsers? None of them support it. iOS, Android, doesn't matter.

So if you're building something that needs system audio, you're looking at Chrome/Edge desktop only. That's maybe 60-65% of your potential users.

What I ended up doing

I detect the browser upfront and show a clear message:

"Firefox doesn't support system audio capture for meetings. Use Chrome or Edge for this feature. Microphone capture is still available."

No tricks, no workarounds. Just honesty. Users appreciate knowing why something doesn't work rather than wondering if they did something wrong.

For Firefox/Safari users, the app falls back to microphone-only mode. It's not ideal for capturing both sides of a conversation, but it's better than nothing.

The annoying details

A few things that wasted my time so they don't waste yours:

You have to request video. Even if you only want audio. video: true is mandatory. I immediately stop the video track after getting the stream, but you can't skip it.

The "Share tab audio" checkbox is easy to miss. Chrome shows it in the sharing dialog, but it's not checked by default. If your user doesn't check it, you get a stream with zero audio tracks. No error, just silence.

The stream can die anytime. User clicks "Stop sharing" in Chrome's toolbar? Your stream ends. You need to listen for the ended event and handle it gracefully.

Was it worth it?

Absolutely. For the browsers that support it, capturing tab audio is a game-changer. You can build things that weren't possible before — meeting assistants, live translators, accessibility tools.

Just go in knowing that you'll spend time on browser detection and fallbacks. That's the web in 2025.

If you're curious about what I built, check out LiveSuggest. And if you've found better workarounds for Firefox/Safari, I'd love to hear about them in the comments.

DEV Community