关于音频自动播放的问题

Posted 2020-11-18 xinxinxiangrong7

之前工作中遇到的音频文件在移动端不能自动播放的问题，后来发现在pc端初始页面第一次加载页面的时候（注意：是没有缓冲的情况下），这个时候音频也是无法自动播放的，会在控制台输出错误：如图

翻译错误代码：Uncaught (in promise) DOMException: play()失败，因为用户没有首先与文档交互。

也就是说音频还没有被加载

**以下是看了别人文章后的个人感悟，如果有错误的地方，请各位大神指教！**
如有更好的方法，欢迎留言！

问题代码：

  html部分

  <audio src="img/myDream.m4a" preload="none" id="musicAudio"></audio>

  <!--

preload="none"是为了防止页面还没显示出来就播放了音乐

-->

js部分

let  musbox=document.getElementById(‘musicAudio‘);//获取到元素

musbox.play();//初始页面没有缓冲的时候，是无法出发play的，因为音频文件此时还没有，会报上面截图的错误

musbox.oncanplay=function () { //当前音频可以播放触发的事件（资源可能没有加载完成，随播放随加载）
//以下是 音频可以播放后要做的事情

     musbox.play();//这个播放是为了下次有缓存的时候能够播放

   playBtn.className=‘playBtn move‘;

}

解决代码：

setTimeout(function () {
    let bon=musbox.play();//获取到的是一个promise

//promise拥有then和catch方法，成功的时候调用then，失败的时候调用catch，这里在初始的时候没有音频文件，所以promise状态是失败的
//就直接可以在失败的时候做下处理

    bon.catch(()=>{//调用catch

     if(musbox.paused){//这里musbox.paused为ture就证明不是播放的状态，只要不是播放的状态就调用play让其播放

           musbox.play();
        }
     })
},1000);

musbox.oncanplay=function () { //因为上面已经播放，这里自然是已经触发了能够播放的事件
       musbox.play();
    playBtn.className=‘playBtn move‘;}


移动端中是禁止音频自动播放的：

QQ中可以正常播放

微信中需要加代码：

document.addEventListener("WeixinJSBridgeReady", function () {

   musbox.play();

}, false);