HTML5中Audio元素在chrome中自动播放报错Uncaught (in promise) DOMException的解决方法

  • 2019-03-05
  • 939
  • 0
  • 3

  之前写那篇《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>

  这样的话只要用户打开页面点击任意位置,就会自动播放了,不至于报异常。

评论

还没有任何评论,你来说两句吧

发表评论

*

浙ICP备16016405号-2
浙公网安备 33010602007544号