How to Capture System Audio in the Browser

Understanding Browser Audio Capture

Capturing system audio in a web browser has become possible thanks to the Screen Capture API, specifically the getDisplayMedia method. Unlike microphone input (getUserMedia), getDisplayMedia allows you to capture the audio output of an entire tab, window, or screen — making it perfect for music visualization.

The Technical Foundation

Browser audio capture relies on two key APIs working together:

Step-by-Step Implementation

#### 1. Request Audio Capture

The first step is to call getDisplayMedia with audio enabled:

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,  // Required by the API
  audio: true,  // Enables audio capture
});

Note that video: true is required by the spec even if you only want audio. You can immediately stop the video track after receiving the stream to reduce resource usage.

#### 2. Extract the Audio Track

Once you have the stream, verify that an audio track is present:

const audioTracks = stream.getAudioTracks();
if (audioTracks.length === 0) {
  throw new Error('No audio track — the user may not have checked "Share audio"');
}

#### 3. Connect to the Web Audio API

Create an AudioContext and connect the stream:

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const analyser = audioContext.createAnalyser();
analyser.fftSize = 1024;
source.connect(analyser);

#### 4. Read Frequency Data

In your animation loop, extract real-time audio data:

const frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData);

Browser Support

Common Pitfalls

Best Practices

System audio capture opens up exciting possibilities for browser-based music visualization, audio analysis tools, and interactive experiences — all without requiring any downloads or plugins.