webrtc - Javascript: Does <audio>.captureStream() work without play()? - Stack Overflow

admin管理员组

文章数量:1399329

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?

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?

• javascript
• webrtc
• html5-audio

Share Improve this question Follow edited Nov 21, 2022 at 3:25 sideshowbarker♦ 88.6k3030 gold badges215215 silver badges212212 bronze badges asked Oct 2, 2018 at 20:19 20802080 1,41722 gold badges1717 silver badges4444 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

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

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

本文标签： webrtcJavascript Does ltaudiogtcaptureStream() work without play()Stack Overflow