Search code examples
google-chromeaudioautoplay

How to autoplay audio in Chrome (Angular)?

I have to implement a sound notification and I just can't get audio to play on Chrome if the user hasn't interacted with the page.

I have tried workarounds like:

  • adding iframe with a dummy audio file,
  • using ViewChild with the play() method,
  • even using a click() on a button and then trying to play() method again.

None of these seem to work. The only result I had was when the user interacted with the page, but if he refreshes the page and doesn't interact with the page, no sound will play which beats the purpose of the audio notification.

Autoplay seems to not have any problems with Edge, anyone know a good workaround for Chrome?

Stackblitz exemple of my implementation is here

Solution

  • You can't.

    Your page does not have a high enough Media Engagement Index to enable autoplay. You can debug this at chrome://media-engagement.

    See also: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#mei