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.

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.

• javascript
• html
• jquery
• google-chrome
• html5-audio

• 1 The site you linked to won't autoplay if you don't click on a link on the page. i.e if you visit https://olafwempe. directly where it autoplays it wont, it only works because you click the link on the page which bubbles up to playing the audio. auto play without any user action is prevented, you can make any action by adding a click event to any item, the iframe way is also buggy esp if using IDM as will cause a prompt to download to happen. use the AudioContext api or get the user to click page first – Lawrence Cherone Commented Jul 3, 2020 at 18:28

2 Answers 2

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 acplished:

• 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./web/updates/2017/09/autoplay-policy-changes

There's a simple solution for that first you should telling the browsers that my sound is silent, in order to passing the website without applying some features so then you can start the real sound .mp3 so you can just use somethings like below.

<iframe src="assets/img/emos/silence.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe>

<audio autoplay>
  <source src="assets/img/emos/hb.mp3" type="audio/mp3">
</audio>