Playing MediaStream using AudioContext.createMediaStreamSource vs HTMLAudioElement.srcObject

Question

I'm trying to play MediaStream from remote peer (WebRTC) using Web Audio API. When i attach the stream to audio element using audio.srcObject = stream it plays ok, but when i try to use AudioContext it does not play any sound at all (I need to avoid audio/video HTML tag).

This piece works:

<audio controls>
<script>
   const audioEl = document.getElementsByTagName('audio')[0];
   audioEl.srcObject = MY_STREAM;
   audioEl.play();
</script>

This one does not:

const audioContext = new AudioContext();
const sourceNode = audioContext.createMediaStreamSource(MY_STREAM);
sourceNode.connect(audioContext.destination);
// Trying even 'audioContext.resume()' after user gesture with no luck

What is weird about that is that when MY_STREAM is my micriphone then it plays nicely for Web Audio API (i hear the feedback from my mic).

So it would suggest that there is something different between microphone MediaStream and the one i get from WebRTC connection but why DOES it play for simple HTML audio tag?

Most probably, you are not generating your AudioContext from an user-trusted event. You need to resume() it in Chrome (rules are somehow stricter for AudioContext than for MediaElements). Also, why can't you use a MediaElement? — Kaiido
I've tried making .resume() after some click but it didn't helped. FWIW AudioContext.state property is running all the time (developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/state) — Adam Szmyd

Kaiido Kaiido · Accepted Answer · 2019-02-20T07:41:02

As demonstrated by @jib, this is a Chrome bug.
I have opened a new issue to let them know about it.

I thought I found a workaround by simply assigning this MediaStream to the srcObject of a dummy HTMLAudioElement,

new Audio().srcObject = mediaStream;

but somehow, while testing on my localhost it didn't persist in time, while in this fiddle it does.

I also encountered a lot of other weird behavior while playing around, like different tabs having incidence on others and things like that.

Add to that other non-fixed bugs in the area that make me think of false positives and all-in-all, I fear there is no proper solution than waiting for them to fix it...

Playing MediaStream using AudioContext.createMediaStreamSource vs HTMLAudioElement.srcObject

1 Answers