音频自动播放在 Mozilla、Microsoft Edge 和旧版 Google Chrome 中也有效，但由于自动播放的政策更改，在 Google Chrome 67+中无效。
他们已经阻止了自动播放（直到满足链接博文中指定的特定会话条件）。如何在 Google Chrome 67+ 中自动播放音频？
解决方案 #1
我的解决方案是创建一个iframe
<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>
和audio非 chrome 浏览器的标签
<audio autoplay loop id="playAudio">
<source src="audio/source.mp3">
</audio>
在我的script
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (!isChrome){
$('#iframeAudio').remove()
}
else {
$('#playAudio').remove() // just to make sure that it will not have 2x audio in the background
}
解决方案#2：
根据@Leonard，还有另一种解决方法
创建一个iframe不播放任何内容的播放器，只是为了在第一次加载时触发自动播放。
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>
mp3 文件silence.mp3的良好来源
然后轻松播放您的真实音频文件。
<audio id="player" autoplay loop>
<source src="audio/source.mp3" type="audio/mp3">
</audio>
Personally I prefer solution #2 because it is cleaner approach for not relying so much in JavaScript.
Update August 2019
Solution #3
As an alternative we can use <embed>
For Firefox
It seems that audio auto-play is working so we don't need the <embed> element because it will create double audio running.
// index.js
let audioPlaying = true,
backgroundAudio, browser;
browser = navigator.userAgent.toLowerCase();
$('<audio class="audio1" src="audio.mp3" loop></audio>').prependTo('body');
if (!browser.indexOf('firefox') > -1) {
$('<embed id="background-audio" src="audio.mp3" autostart="1"></embed>').prependTo('body');
backgroundAudio = setInterval(function() {
$("#background-audio").remove();
$('<embed id="background-audio" src="audio.mp3"></embed>').prependTo('body');
}, 120000); // 120000 is the duration of your audio which in this case 2 mins.
}
Also if you have a toggle event for your audio make sure to remove the created <embed> element for audio.
Note: After your toggle, it will restart from the beginning because the <embed> is already deleted and the <audio> element will play as normal now.
$(".toggle-audio").on('click', function(event) {
audioPlaying = !audioPlaying;
$("#background-audio").remove();
clearInterval(backgroundAudio);
if (audioPlaying){
$(".audio1").play();
// play audio
}
else {
$(".audio1").pause();
}
And now make sure to hide these <audio> and <embed> elements
audio, embed {
position: absolute;
z-index: -9999;
}
Note: diplay: none and visibility: hidden will make the <embed> element not work.
在 chrome 中使用音频标签的自动播放功能有一个非常巧妙的技巧。
添加
<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>
而silence.mp3只有 0.5 秒的沉默。
这
<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>
之后工作。
Chrome 注意到已播放声音并在音频标签中授予自动播放权限。
自 2018 年 4 月起，Chrome 的自动播放政策发生了变化：
“Chrome 的自动播放策略很简单：
- 始终允许静音自动播放。
在以下情况下允许自动播放声音：
- 用户已与域进行交互（单击、点击等）。
- 在台式机上，已超过用户的媒体参与指数阈值，这意味着用户之前播放过有声视频。
- 在移动设备上，用户已将该站点添加到他或她的主屏幕。
还
- 顶级框架可以将自动播放权限委托给它们的 iframe，以允许自动播放声音。“
Chrome 的开发者网站有更多信息，包括一些编程示例，可以在这里找到：https ://developers.google.com/web/updates/2017/09/autoplay-policy-changes
只需添加这个小脚本，如https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio中所述
<head>
<script>
window.onload = function() {
var context = new AudioContext();
}
</script>
</head>
这将按您的意愿工作：
<audio autoplay>
<source src="hal_9000_sorry_dave.mp3">
</audio>
至少你可以使用这个：
document.addEventListener('click', musicPlay);
function musicPlay() {
document.getElementById('ID').play();
document.removeEventListener('click', musicPlay);
}
当用户单击页面上的任意位置时，音乐开始播放。
它还会立即删除 EventListener，因此如果您使用音频控件，用户可以将其静音或暂停，并且当他单击其他地方时音乐不会再次开始。
由于烦人的广告，浏览器已将其隐私更改为自动播放视频或音频。所以你可以用下面的代码来欺骗。
您可以在 iframe 中放置任何无声音频。
<iframe src="youraudiofile.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio autoplay>
<source src="youraudiofile.mp3" type="audio/mp3">
</audio>
只需在音频元素前添加一个以 .mp3 作为源并允许 =“autoplay” 的不可见 iframe。结果，浏览器被诱骗启动任何后续音频文件。或者自动播放未静音的视频。
您可以简单地使用 (.autoplay = true;) 如下（在 Chrome 桌面上测试）：
<audio id="audioID" loop> <source src="path/audio.mp3" type="audio/mp3"></audio>
<script>
var myaudio = document.getElementById("audioID").autoplay = true;
</script>
如果您需要添加停止/播放按钮：
<button onclick="play()" type="button">playbutton</button>
<button onclick="stop()" type="button">stopbutton</button>
<audio id="audioID" autoplay loop> <source src="path/audio.mp3" type="audio/mp3">
</audio>
<script>
var myaudio = document.getElementById("audioID");
function play() {
return myaudio.play();
};
function stop() {
return myaudio.pause();
};
</script>
如果你想让停止/播放成为一个单一的按钮：
<button onclick="PlayStop()" type="button">button</button>
<audio id="audioID" autoplay loop> <source src="path/audio.mp3" type="audio/mp3">
</audio>
<script>
var myaudio = document.getElementById("audioID");
function PlayStop() {
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>
如果你想在同一个按钮上显示停止/播放：
<button onclick="PlayStop()" type="button">Play</button>
<audio id="audioID" autoplay loop> <source src="path/audio.mp3" type="audio/mp3">
</audio>
<script>
var myaudio = document.getElementById("audioID");
function PlayStop() {
if (elem.innerText=="Play") {
elem.innerText = "Stop";
}
else {
elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};`
</script>
在某些浏览器中，音频可能无法正常工作，因此尝试在代码之前添加 iframe 作为一个技巧：
<iframe src="dummy.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<button onclick="PlayStop()" type="button">Play</button>
<audio id="audioID" autoplay loop> <source src="path/audio.mp3" type="audio/mp3">
</audio>
<script>
var myaudio = document.getElementById("audioID");
function button() {
if (elem.innerText=="Play") {
elem.innerText = "Stop";
}
else {
elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>
在地址栏上单击站点设置，或复制此地址（本地主机）并选择允许声音 chrome://settings/content/siteDetails?site=https%3A%2F%2Flocalhost
自 2020 年起，这是与浏览器相关的设置，无法通过 html 代码启用。大多数浏览器默认阻止自动播放。在这里你可以找到它：
Firefox：在哪里启用/禁用自动播放
Chrome：在哪里启用/禁用自动播放
