h5的audio标签不能自动播放背景音乐

博主： Yawee
发布时间：2019 年 08 月 30 日
3415次浏览
7 条评论
823字数
分类：学无止境

今天拿起以前做的一个带有背景音乐的项目跑了一下，发现背景音乐没有自动播放了，并抛出一个报错：Uncaught (in promise) DOMException，突然想起去年的时候chrome的autoplay政策做了改革，据说是为了提高用户体验，减少数据消耗。那么找出报错的那一行代码：<pre><code>audio.play();</code></pre>试想如果是浏览器加载页面的时候没有发现用户行为(click、tap等)，遂停止了自动播放音乐的事件，那么我给它个计时器，看几秒后会不会自动播放呢？<pre><code>setTimeout(function() {
 audio.play();
}, 1000);</code></pre>测试了下果然可以了，将1000改为0，便也算是解决了这个问题。可是，打开控制台那句报错还在，作为一个重度强迫症患者这可是忍不了的 <img src="https://yaw.ee/usr/themes/handsome/assets/img/emotion/qq/zk.png" class="emotion-qq"> 。然后搜了下，google开发者中心有这个记录和解决方法 <img src="https://yaw.ee/usr/themes/handsome/assets/img/emotion/qq/ch.png" class="emotion-qq"> ，=><a href="https://developers.google.com/web/updates/2017/06/play-request-was-interrupted" target="_blank">灰机直达(需要科学上网)</a>，这样就不会有报错了：<pre><code>var playPromise = audio.play();
if (playPromise !== undefined) {
 playPromise.then(_ => {
 // Automatic playback started!
 // Show playing UI.
})
 .catch(error => {
 // Auto-play was prevented
 // Show paused UI.
 });
}</code></pre>

最后修改：2019 年 10 月 30 日 05 : 44 PM

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

邮箱 *

地址

7 条评论

抽烟美女分享
1 个月前

试了一下，不行。

回复
1. Yawee
  1 个月前
  
  @抽烟美女分享
  那就是我们遇到的问题不一样了, 再找找其他解决方案试试看
  
  回复
line
2 个月前

var playPromise = audio.play();
遇到这样子的问题

回复
line
2 个月前

貌似没弄好。。。。不好用

回复
ydys
2 个月前

空包代发、一单一用单号网www.kuaid100.cn

回复
热搜
11 个月前

文章不错非常喜欢

回复
趣模板源码
11 个月前

这个解决h5的audio标签不能自动播放背景音乐的教程写的不错支持一下，趣模板源码网商业源码分享下载www.qumuban.com前来支持

回复