HTML5中Audio元素在chrome中自动播放报错Uncaught (in promise) DOMException的解决方法
之前写那篇《forget-me-not》文章的时候,要插背景音乐,发现要让页面打开就自动播放音乐似乎不行,HTML5使用的audio标签虽然可以用js的play方法触发播放,但我试了很多次都不行,每次打开网页并没有播放,F12看到Chrome报了Uncaught (in promise) DOMException这个异常,一直不知道咋回事,然而Edge和IE是正常播放的。
后来查了一下Google官方的文档,见这里:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
大致说的意思是从2018年4月开始,chrome的自动播放策略改变了,为了减少对用户的打扰,所以要触发播放音乐,用户必须先和页面交互才行,貌似Chrome只支持点击。好吧,真的是坑爹的设定。所以,如果要自动播放的话,需要先等待一个交互事件:
<audio loop autoplay="autoplay" id="bgMusic" src="xxx.mp3"> <script> var audio = document.getElementById("bgMusic"); document.addEventLisener('click',()=>{ audio.play(); }); </script>
这样的话只要用户打开页面点击任意位置,就会自动播放了,不至于报异常。