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

3
votes

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.

1
javascriptreactjsaudiomp3web-audio-api
You can find your answer here stackoverflow.com/questions/42336604/… – Steve Phuc

1 Answers

2
votes

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