最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to make audio play on body onload? - Stack Overflow

programmeradmin2浏览0评论

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>  

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>  
Share Improve this question edited Oct 15, 2018 at 0:10 brasofilo 26.1k15 gold badges93 silver badges186 bronze badges asked Oct 14, 2018 at 23:10 Best BibekBest Bibek 1752 silver badges11 bronze badges 1
  • Check this: stackoverflow./questions/15394704/future-of-javascript-audio – Randy Casburn Commented Oct 14, 2018 at 23:25
Add a ment  | 

2 Answers 2

Reset to default 6

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.

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>
发布评论

评论列表(0)

  1. 暂无评论