Javascript: Does <audio>.captureStream() work without play()?

Question

In the browser, I want to capture the stream of an audio tag that has an .mp3 as source, then send it live via WebRTC to the server. I don't want to hear it via the speakers.

Is it possible to call audioElement.play() without having speaker output?

Answer 1

new Audio() returns an HTMLAudioElement that connects to your browser's default audio output device. You can verify this in the dev console by running:

> new Audio().sinkId
<- ""

where the empty string output specifies the user agent default sinkId.

A flexible way of connecting the output of an HTMLAudioElement instance to non-default sink (for example, if you don't want to hear it through the speakers but just want to send it to another destination like a WebRTC peer connection), is to use the global AudioContext object to create a new MediaStreamAudioDestinationNode. Then you can grab the MediaElementAudioSourceNode from the Audio object holding your mp3 file via audioContext.createMediaElementSource(mp3Audio), and connect that to your new audio destination node. Then, when you run mp3Audio.play(), it will stream only to the destination node, and not the default (speaker) audio output.

Full example:

// Set up the audio node source and destination...
const mp3FilePath = 'testAudioSample.mp3'
const mp3Audio = new Audio(mp3FilePath)
const audioContext = new AudioContext()
const mp3AudioSource = audioContext.createMediaElementSource(mp3Audio)
const mp3AudioDestination = audioContext.createMediaStreamDestination()
mp3AudioSource.connect(mp3AudioDestination)

// Connect the destination track to whatever you want,
// e.g. another audio node, or an RTCPeerConnection.
const mp3AudioTrack = mp3AudioDestination.stream.getAudioTracks()[0]
const pc = new RTCPeerConnection()
pc.addTrack(track)

// Prepare the `Audio` instance playback however you'd like.
// For example, loop it:
mp3Audio.loop = true

// Start streaming the mp3 audio to the new destination sink!
await mp3Audio.play()

Answer 2

It seems that one can mute the audio element and still capture the stream:

audioElement.muted = true; var stream = audioElement.captureStream();