How to record web/browser audio output (not microphone audio)

Tags: , , , ,

Has anyone successfully been able to access the audio stream that is being outputted from the browser window (not from the microphone)?

We are currently building a sound studio app where the user can play an instrument and we want to be able to record and save that audio as it is being generated. We have real-time audio output being generated by locally saved mp3 files (i.e. on pressing piano keys), but have no way of capturing this audio stream sequence to save it.


I assume you’re using the Web Audio API for this project.

First, you need to create a MediaStreamAudioDestinationNode. This is a Web Audio node that you can connect the rest of your graph to, and have it output to a MediaStream which can be recorded.

const mediaStreamDestination = audioContext.createMediaStreamDestination();


Next, you need a MediaRecorder which will take the raw PCM audio as the MediaStream produces it, and encode it with the desired codec.

const mediaRecorder = new MediaRecorder(;

mediaRecorder.addEventListener('dataavailable', (e) => {
  // Recorded data is in ``


Note that this MediaRecorder example is the exact same, no matter whether your MediaStream is sourced from getUserMedia, or from your Web Audio API graph.

Full example here:

Source: stackoverflow