解决微信浏览器中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不能自动播放问题的主要内容,如果未能解决你的问题,请参考以下文章

解决h5页面背景音乐不能自动播放的方案

一种解决h5页面背景音乐不能自动播放的方案

一种解决h5页面背景音乐不能自动播放的方案

ios微信h5音频audio无法自动播放

解决在 iOS 微信浏览器中无法自动播放 HTML5 audio

解决在 iOS 微信浏览器中无法自动播放 HTML5 audio