标签:直接 资源 let 监听 切换 时间 浏览器 col style
废话不多说,直接贴代码:
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();
// });
标签:直接 资源 let 监听 切换 时间 浏览器 col style
原文地址:https://www.cnblogs.com/xiaofenghuang/p/13036581.html