Playing audio within video overlay component

Extensions
1

The following code is producing a DOMException within Chrome that I cannot resolve:

/* JavaScript */

if (/* stream is not muted */) {
  const sound = new Audio(url)
  sound.volume = // ... set volume based on stream volume
  await sound.play()
}

The recommendations found here also do not work.

What’s the recommended way to play audio within an extension with JavaScript?

2

Make sure to abide by

2.4 Extensions can include audio only if they include controls which allow viewers to adjust the volume, and by default, these controls are set to off/muted.

And additionally you need to parse the DOM error to see what the specific error message is.

3

The full error is:

{
   code: 0
   message: "play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD"
   name: "NotAllowedError"
}

It is caused by Chrome requiring the user to interact with the frame before autoplaying audio.

4

If you follow 2.4, and have a mute/volume control for your extension, then then user will interact with your extension to unmute first. Making that interaction error irrelevant.

And thus you will follow chrome “good practice” as well as being Twitch Extension Policy Compliant.