关于音频自动播放的问题
之前工作中遇到的音频文件在移动端不能自动播放的问题,后来发现在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);