如何在身体上进行音频播放？
[英]How to make audio play on body onload?
问题描述
Yesterday I downloaded a responsive navbar tutorial and saw that the author had used button click sound using JavaScript. 
昨天我下载了一个响应式导航栏教程，看到作者使用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. 但是当我尝试将相同的代码添加到body onload函数时，音乐就不会播放。
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. 所以，我认为代码有一些错误，但我突然从Opera Mini for Android打开了HTML文件并出现了背景音乐。 The code which isn't working in advanced browsers like Chrome is working in Opera Mini. 在Chrome等高级浏览器中无效的代码可以在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>
2 个解决方案
解决方案1
5 2018-10-14 23:44:29
As of April 2018, Google had changed their Autoplay Policy . 截至2018年4月，谷歌已经改变了他们的自动播放政策 。 It was implemented in Chrome v.66. 它是在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. 我理解它的方式，似乎反映在您的体验中：如果没有使用特定请求播放音频的域的用户操作，Chrome浏览器会将所有自动播放的音频静音。 Once a user has made a positive interaction, the rules soften and the media may be played without consent renewal. 一旦用户进行了积极的互动，规则就会变得柔和，并且可以在未经同意续订的情况下播放媒体。
解决方案2
3 2018-10-14 23:34:47
You can do the first one (the background music) with pure HTML: 您可以使用纯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中：
<!--HTML-->
<button id="clk" onClick="Loops.play()">Here</button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.