关于音频自动播放的问题

Posted xinxinxiangrong7

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于音频自动播放的问题相关的知识,希望对你有一定的参考价值。

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






 






























以上是关于关于音频自动播放的问题的主要内容,如果未能解决你的问题,请参考以下文章

依次播放多个音频片段

在 IOS 中,如何乱序播放音频片段的一部分?

js解决音频audio在IOS系统下无法自动播放问题

h5页面自动播放视频音频_关于媒体文件自动全屏播放的实现方式

h5页面自动播放视频音频_关于媒体文件自动全屏播放的实现方式

无法对非静态方法 getAssets() 进行静态引用 - 无法在片段中播放音频