解决微信浏览器中H5中的audio不能自动播放问题
Posted 小凤凰
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决微信浏览器中H5中的audio不能自动播放问题相关的知识,希望对你有一定的参考价值。
废话不多说,直接贴代码:
1 <audio 2 style="display:none; height: 0" 3 id="bg-music" 4 preload="auto" 5 loop="loop" 6 :src="视频地址,但是此地址,切记不能编译,最好放到服务器上" 7 >您的浏览器不支持音频播放</audio>
1 mounted(){ 2 this.audioAutoPlay(); 3 }, 4 methods:{ 5 audioAutoPlay() { 6 let audio = document.getElementById("bg-music"); 7 audio.play(); 8 document.addEventListener( 9 "WeixinJSBridgeReady", 10 function() { 11 audio.play(); 12 }, 13 false 14 ); 15 } 16 }
如果加上点击播放,再次点击禁止播放
1 missusFun() { 2 this.isMusic = !this.isMusic; 3 if (this.isMusic) { 4 this.audioAutoPlay(); 5 } else { 6 let media = document.querySelector("#bg-music"); 7 media.pause(); 8 } 9 },
切换播放资源时,如果地址切换过来了,但是就是不播放声音,这时一定要加个延时
1 setTimeout(() => { 2 this.audioAutoPlay(); 3 }, 20);
//let media = document.querySelector("#bg-music");
// media.addEventListener("canplay", function() {
// //监听audio是否加载完毕,如果加载完毕,则读取audio播放时间
// media.play();
// });
以上是关于解决微信浏览器中H5中的audio不能自动播放问题的主要内容,如果未能解决你的问题,请参考以下文章