Solution 1 :

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:

Solution 2 :

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">

Problem :

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">

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.


Comment posted by AudioContext

The site you linked to won’t autoplay if you don’t click on a link on the page. i.e if you visit

Comment posted by BobeCampos

So, I found other people saying that it’s impossible. However, if you check the website I brought here, it does work there! Without any interaction, without scrolling or ckicling. This website was the reason I made this post, because, if the autoplay works there, so there is probably a way to do it.

Comment posted by

Take into account that you do a click over the link for going to the home page where the autoplay works, that means that you are interacting with the website (you click over the link). Now, open a private mode window in Chrome (or the browser you use) and go directly to

Comment posted by Fabrizio Valencia

I think the best way is a little trick like that or like what I did, else, you could try with the MEI, or even (I don’t know if it works) trying to emulate a user interaction with JavaScript.

Comment posted by BobeCampos

This was clever, dude. You have an excelent point. If any other response with other solution pop up here til next monday, I’ll take yours as the right solution to the moment and give you the green check.