网页音频无法自动播放的解决方案

最近在维护一个网页应用时,发现其音频偶尔无法自动播放,且报如下错误:

1
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

该错误产生原因是chrome66之后都禁止音视频的自动播放。要解决该问题,可以在用户首次进入页面时,提示用户点击启动音视频自动播放,模拟用户交互。js代码如下:

1
2
3
<script>
window.confirm("是否启动语音自动播放?")
</script>

以上方法有问题,不能模拟用户交互,还是需要用户真正点击网页。另外还可以参考文章解决浏览器无法自动播放音频的问题的解决方案。

参考链接

  1. Chrome 66禁止声音自动播放之后,by 人人网FED.
  2. 解决浏览器无法自动播放音频的问题,by 寻找_.
  3. chrome66 禁止自动播放后,有什么比较好的方法实现audio的自动播放吗?,by segmentfault.