Yawee

h5的audio标签不能自动播放背景音乐
今天拿起以前做的一个带有背景音乐的项目跑了一下,发现背景音乐没有自动播放了,并抛出一个报错:Uncaught (i...
扫描右侧二维码阅读全文
30
2019/08

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

今天拿起以前做的一个带有背景音乐的项目跑了一下,发现背景音乐没有自动播放了,并抛出一个报错:Uncaught (in promise) DOMException,突然想起去年的时候chrome的autoplay政策做了改革,据说是为了提高用户体验,减少数据消耗。

那么找出报错的那一行代码:

audio.play();

试想如果是浏览器加载页面的时候没有发现用户行为(click、tap等),遂停止了自动播放音乐的事件,那么我给它个计时器,看几秒后会不会自动播放呢?

setTimeout(function() {
    audio.play();
}, 1000);

测试了下果然可以了,将1000改为0,便也算是解决了这个问题。可是,打开控制台那句报错还在,作为一个重度强迫症患者这可是忍不了的

然后搜了下,google开发者中心有这个记录和解决方法 ,=>灰机直达(需要科学上网),这样就不会有报错了:

var playPromise = audio.play();
if (playPromise !== undefined) {
    playPromise.then(_ => {
    // Automatic playback started!
    // Show playing UI.
})
    .catch(error => {
    // Auto-play was prevented
    // Show paused UI.
    });
}
Last modification:October 30th, 2019 at 05:44 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

2 comments

  1. 热搜

    文章不错非常喜欢

  2. 趣模板源码

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