2

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.
BobeCampos
  • 25
  • 1
  • 1
  • 3
  • 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.com` 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](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) api or get the user to click page first – Lawrence Cherone Jul 03 '20 at 18:28

2 Answers2

4

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

Fabrizio Valencia
  • 19,299
  • 4
  • 16
  • 19
  • 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. – BobeCampos Jul 03 '20 at 18:16
  • 1
    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 https://olafwempe.com/ and you are going to see that does not autoplay. Then do the same, going first here https://olafwempe.com/how-to-enable-audio-and-video-autoplay-with-sound-in-chrome-and-other-browsers-in-2019/ and then doing a click over the link and the autoplay is going to work. – Fabrizio Valencia Jul 03 '20 at 18:25
  • 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. – Fabrizio Valencia Jul 03 '20 at 18:31
  • 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. – BobeCampos Jul 03 '20 at 19:01
-1

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>
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Mustafa
  • 1
  • 2
  • nobody raise up for this solutions? – gumuruh Apr 14 '23 at 23:47
  • please delete this answer. this code is copy-pasted from the link pointed to by the question, and thus answers nothing at all. plus this loophole has been plugged already. – Lanchon May 12 '23 at 20:05