Search code examples
javascripthtmljquerygoogle-chromehtml5-audio

How to autoplay audio in any browser?

I'm making a website, and I need that, when the page loads, a background sound plays automatically.

Howerver, into my research, I found out that Google changed the autoplay policies to avoid ads. The result is that anything with sound and the autoplay prop just stopped working.

I tried a lot of things people suggested on internet, I'll list a few at the end of this post.

So, I managed to find this website here. The programmer suggested to use an iframe with a 1 second mp3 file with no sound just before the audio tag. And it works perfectly on his website!

So, my issue is... I'm using the same 1-second mp3 file that he used. And I'm using the same html structure that he used (just changing the path of my files and the id names). And it didn't work for me.

<iframe src="path/silence.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe> 
<audio id="bgsound" autoplay loop>
    <source src="path/natureza.mp3" type="audio/mp3">
</audio>

Can someone help me to figure out how the same code structure can work on his website and doesn't work on mine? All the related topics I found about this issue in Stack Overflow hasn't a definitive solution, so I thought that maybe, with a website that brings this funcionality working, someone can help me digging this case.

Things I already tried before and ended up with no success:

  • Use the prop muted together with the autoplay and, with a timeout on JavaScript, give the false value to the muted prop after a few seconds.
  • Don't use the autoplay prop and activate the play() method on loading the page.
Solution

  • A couple of weeks ago I tried exactly what you intend to do, however, after a lot of research I realized this is nearly impossible now. For example in Chrome (I don't know if also in other browsers) you cannot autoplay sounds/videos unless one of these points is accomplished:

    • The user interacts with your website (click on any part of your site).
    • The user added your website to the home screen (mobile).
    • The user has crossed the media interaction index (MEI) threshold.
    • Your website is in the Google whitelist for autoplaying (such as Youtube).

    In my case I did a little trick with a cookies policy button to force the users to interact with my website and trigger the sound playing.

    You can see more information and examples here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes