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

Question

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 (ie on pressing piano keys), but have no way of capturing this audio stream sequence to save it.

Answer 1

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();

yourSourceNode.connect(mediaStreamDestination);

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(mediaStreamDestination.stream);

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

mediaREcorder.start();

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: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamAudioDestinationNode