Javascript 在Chrome、Firefox和Safari上实现音频自动播放是否有任何解决方法（或黑客攻击）？

我有一个动画项目，需要在所有主要浏览器（包括手机浏览器）上自动播放音频。我们还需要控制音频，使其在暂停并再次播放后继续播放。这意味着我们不能使用iframe，因为它每次都会重放音频。另外，只要发现

iframe

现在无法在Chrome中自动播放。。。是否有解决此问题的方法？

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

所以你需要做的就是邀请你的用户来做这个

为了完全安全，您可以通过此用户手势触发事件（Safari实际上需要此事件）调用要控制的MediaElement的

play（）

方法，然后完全控制此MediaElement：

//维基媒体的原始样本
// https://en.wikipedia.org/wiki/Category:The_Beatles_audio_samples
const audio=新音频（“https://dl.dropboxusercontent.com/s/0eio842lwj1x5dj/Strawberry_Fields_Forever_%28Beatles_song_-_样本%29.mp3”）；
audio.repeat=true；
audio.volume=0；
document.getElementById（'btn'）。onclick=e=>{
getElementById（'splash'）.remove（）；
audio.play（）。然后（（）=>{
audio.currentTime=0；
audio.pause（）；
audio.volume=1；
startTimers（）；
});
};
函数startTimers（）{
设置超时（playAudio，2000）；
设置超时（pauseAudio，3000）；
设置超时（播放音频，6000）；
设置超时（changeSrc，7000）；
设置超时（pauseAudio，15000）；
设置超时（播放音频，60000）；
设置超时（pauseAudio，70000）；
}
函数playAudio（）{
console.log（'playing'）；
音频播放（）；
}
函数pauseAudio（）{
console.log（“暂停”）；
audio.pause（）；
}
函数changeSrc（）{
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-音频转换器.com%29.mp3”；
音频播放（）；
}

#飞溅{
位置：绝对位置；
左：0；
排名：0；
宽度：100vw；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#splash p{display:inline block}

开始一场精彩的比赛

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

---

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

当您尝试在用户不首先与文档交互的情况下自动播放音频时，它会抛出一个错误。因此，关键是让用户首先与文档交互

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

有关捕获错误的信息，请参阅

---

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

使其在暂停后继续播放

——但它暂停了对不起，我是说在它再次播放之后。我只是编辑了这个问题。是的，我知道我们需要让用户触发音频来播放。但是有没有可能跳过触发事件，让音频自动播放呢？@Nicole nope，你至少需要一次（但只有一次）@Kaido那么这个网页是怎么做到的：@SirLemuel nothing会自动播放给我听的。也许你真的允许YT在浏览器的设置中自动播放视频？似乎它只在Chrome中对我有效，但在Safari中不起作用。