Jarvis's Blog

白帽子、全栈、IoT安全专家、嵌入式系统专家

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>

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

EveryOnePiano(EOP)加载ASIO驱动出现“无法设置该输出,系统将加载默认输出”的Patch

上一篇

记CanSecWest19之行

下一篇
评论
发表评论 说点什么
还没有评论
3446
1

    浙公网安备 33011002014706号