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.
Advertisement
Answer
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