Sunday, 18 September 2022

How can I handle createMediaElementSource failure

I'm developing a WebExtension that uses the createMediaElementSource function.

The problem is that this operation can fail, and when it does, it does so without throwing an error. It simply returns an audio node that produces no output, and displays the following warning in the browser console:

The HTMLMediaElement passed to createMediaElementSource has a cross-origin resource, the node will output silence.

Further, the affected <audio>/<video> element will no longer output any sound.


The following snippet demonstrates the problem - as soon as the "Create audio node" button is pressed, the audio becomes permanently muted.

function createAudioNode() {
  const audioElement = document.querySelector('audio')
  const audioContext = new AudioContext()
  const audioNode = audioContext.createMediaElementSource(audioElement)
  audioNode.connect(audioContext.destination)
}
<audio controls src="https://upload.wikimedia.org/wikipedia/commons/4/40/Toreador_song_cleaned.ogg">
  Your browser does not support the <code>audio</code> element.
</audio>
<br>
<button onclick="createAudioNode()">Create audio node</button>

So, my question is: How can I prevent this from happening? I can think of two ways to handle this:

  • Predict that createMediaElementSource will fail, and not execute it at all.
  • Detect that createMediaElementSource has failed, and undo it.

Is either one of these possible? Or is this simply not doable with the current Web Audio API?



from How can I handle createMediaElementSource failure

No comments:

Post a Comment