How to make audio play on body onload?

Question

Yesterday I downloaded a responsive navbar tutorial and saw that the author had used button click sound using JavaScript.
So I try the code (copying it) and was able to make it too. When the button is clicked the background music plays well. But when I try adding the same code to body onload function the music din't play.

So, I thought the code has some error but suddenly I opened the HTML file from Opera Mini for Android and the background music appeared. The code which isn't working in advanced browsers like Chrome is working in Opera Mini. Why is this happening?

 <!DOCTYPE html>
 <head>
 <title>Untitled</title>
 <meta charset="UTF-8"/>
 <link rel="stylesheet" href="" type="text/css"/>
 <script>

 function stir0(){
 var bbs = new Audio('media/background.ogg');
 bbs.play();
 alert('bb');
 }

 function pl(){

  var Loops = new Audio('media/button_click.ogg');

 Loops.play();
  }


 </script>
 </head>
 <body onload="stir0()">
<button id="clk" onClick="pl()">Here</button>
 </body>
 </html>

Check this: https://stackoverflow.com/questions/15394704/future-of-javascript-audio — Randy Casburn, Oct 14 '18 at 23:25

shuk · Answer 1 · 2018-10-15T00:02:56.440

As of April 2018, Google had changed their Autoplay Policy. It was implemented in Chrome v.66.

Relevant snippet from the Policy:

Chrome's autoplay policies are simple:

Muted autoplay is always allowed.

Autoplay with sound is allowed if:

User has interacted with the domain (click, tap, etc.).

On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.

On mobile, the user has added the site to their home screen.

Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

The way I understand it, and it seems to be reflected in your experience: Chrome browser mutes any autoplayed audio if no action of the user had been made with the domain that specificly requests the audio to be played. Once a user has made a positive interaction, the rules soften and the media may be played without consent renewal.

Can you please explain in detail? – Best Bibek Oct 14 '18 at 23:50 — Best Bibek, Oct 14 '18 at 23:50
Sure, added some more details from the attached link =) – shuk Oct 15 '18 at 00:03 — shuk, Oct 15 '18 at 00:03
I got it. But how can I slove this problem? – Best Bibek Oct 15 '18 at 02:14 — Best Bibek, Oct 15 '18 at 02:14

Jack Bashford · Answer 2 · 2018-10-14T23:40:13.897

3

You can do the first one (the background music) with pure HTML:

<audio autoplay>
    <source src="media/background.ogg" type="audio/ogg">
</audio>

The second one (the button click) you do like this:

//JS
var Loops = new Audio("media/button_click.ogg");
//Make sure this is a GLOBAL variable.

And in HTML:

<!--HTML-->
<button id="clk" onClick="Loops.play()">Here</button>

edited Oct 14 '18 at 23:40

answered Oct 14 '18 at 23:34

Jack Bashford

43,180
11
50
79

Using the plain html will the audio play as soon the page is oaded? – Best Bibek Oct 14 '18 at 23:37
@BestBibek It'll play as soon as the ` – Jack Bashford Oct 14 '18 at 23:39
@BestBibek No problem. Did my answer solve your problem? If so, can you mark my answer as accepted? – Jack Bashford Oct 15 '18 at 00:28
Same problem again! The music is playing well when opened from Opera Mini but not from chrome. – Best Bibek Oct 15 '18 at 02:12
@BestBibek that is because `ogg` is only Opera format. You need mp3 to run from Chrome. It works. – Jack Bashford Oct 15 '18 at 02:51
It still isn't working!Is there a better solution? – Best Bibek Oct 15 '18 at 03:00
@BestBibek What I mean is you need to have more audio files (a `.mp3` file is ***required*** to play on Chrome) – Jack Bashford Oct 15 '18 at 04:16
As per the answer above it won't play untill some action is carried out on the page according to new policy. I am unable to make it play too. – Best Bibek Oct 15 '18 at 04:59
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/181858/discussion-between-best-bibek-and-jbdouble05). – Best Bibek Oct 15 '18 at 04:59

How to make audio play on body onload?

2 Answers2