微信浏览器中的audio的问题，有时候播放，有时候不播放是啥问题

Posted 2023-02-27

参考技术A 我的问题是其他设备可以，就是ios微信浏览器里audio有时可以播放有时不可以播放，我在网上看到说浏览器解析不同（可能有时候播放时readyState的值小于等于1）：

Firefox、桌面端Chrome、桌面和移动端Safari：等待音频的readystate过1，然后播放
IE9、安卓移动端Webkit：如果音频的readystate没有过1，什么都不做
因此判断audio.readyState>1或者audio.readyState>2的时候再播放，用定时器setInterval如果大于1或2再audio.play();就可以了，我的是这么解决的。
参考：https://segmentfault.com/q/1010000000390733 参考技术B 貌似本身audio自动播放在android是都可以的，但在iphone上的safari是不行的，需要手动一个事件触发，但在微信内置浏览器里，不过可以试一下，iphone应该也是可以的。

解决微信浏览器中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();
            // });