是否有任何解决方法(或黑客)可以使音频在Chrome，Firefox和Safari上自动播放?

Question

我有一个动画项目，需要在所有主要浏览器(包括手机上的浏览器(上自动播放音频。我们还需要控制音频，使其在暂停并再次播放后继续播放。这意味着我们不能使用iframe因为它每次都会重播音频。另外，只需发现iframe现在无法在Chrome中自动播放...是否有任何解决方法可以解决此问题？

Answer 1

所有这些浏览器都要求您的用户提供一个手势来确认他们确实希望您的页面产生声音。

因此，您需要做的就是邀请您的用户做出此用户手势。

为了完全安全起见，您将从此用户手势触发事件(Safari 实际上需要(调用您希望控制的 MediaElement 的play()方法，然后您将完全控制此 MediaElement：

// original samples from wikimedia
// https://en.wikipedia.org/wiki/Category:The_Beatles_audio_samples
const audio = new Audio("https://dl.dropboxusercontent.com/s/0eio842lwj1x5dj/Strawberry_Fields_Forever_%28Beatles_song_-_sample%29.mp3");
audio.repeat = true;
audio.volume = 0;
document.getElementById( 'btn' ).onclick = e => {
document.getElementById( 'splash' ).remove();
audio.play().then( () => {
audio.currentTime = 0;
audio.pause();
audio.volume = 1;
startTimers();
});
};
function startTimers() {
setTimeout( playAudio, 2000 );
setTimeout( pauseAudio, 3000 );
setTimeout( playAudio, 6000 );
setTimeout( changeSrc, 7000 );
setTimeout( pauseAudio, 15000 );
setTimeout( playAudio, 60000 );
setTimeout( pauseAudio, 70000 );
}
function playAudio() {
console.log('playing');
audio.play();
}
function pauseAudio() {
console.log('pausing');
audio.pause();
}
function changeSrc() {
console.log('changing src');
audio.src = "https://dl.dropboxusercontent.com/s/okbnk1ycupxrrb2/_Sgt._Pepper%27s_Lonely_Hearts_Club_Band_by_the_Beatles_1967%20%281%29%20%28online-audio-converter.com%29.mp3";
audio.play();
}

#splash {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#splash p { display: inline-block }

<div id="splash">
<button id="btn"><h1>Start the awesome</h1></button>
</div>

Answer 2

浏览器上不再有自动播放音频。我建议阅读这些：

谷歌的文章 自动播放政策 chghanges
MDN 的自动播放指南
Webkits自动播放政策

有很多好的信息，为什么它像现在这样工作以及该怎么做。

Answer 3

当您尝试在没有用户先与文档交互的情况下自动播放音频时，它将引发错误。因此，关键是要让用户首先与文档进行交互。

您可以做的是，当用户打开页面时，他必须首先单击某处或某个按钮以使实际内容可见，然后在单击交互后播放音频。

要捕获错误，请参阅扩展 DOM 元素、处理错误和正常降级。

PS：我注意到在切换选项卡时，重新加载您切换到的选项卡并切换回来+重新加载它只是工作，没有任何解决方法。不是解决方案，我只是想知道为什么会发生这种情况(我使用的是最新的 Chrome(。它必须在不执行任何操作的情况下触发文档交互