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.