h5中audio无法播放问题解决

H5页面中添加audio标签，通过调用play()方法进行播放音频，电脑可以正常听到音效，微信中打开没有声音。

?

1 2 3

<audio id="audio" ref="audio" class="sound">     <source src="@/static/pagesound.mp3" /> </audio>

　　播放方法：

?

1	this.$refs.audio.play();

　　调用了播放方法，手机上没有看到音频在播放，设置了muted静音之后，可以看到音频进度条在走了，但是我们需要声音呀。后续尝试更改muted为false也不管用。

　　网上搜了搜相关问题，发现了微信的api可以解决音频在微信中不播放的问题，具体如下：

1、引入微信的api，在微信公众号下载就可以（https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3）

?

1	import wx from './jweixin-1.6.0.js';

2、检测是否在微信环境

?

1 2	const UA = window.navigator.userAgent; const wechat = UA.includes('MicroMessenger') && !UA.includes('miniProgram')

3、调用方法：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

if (wechat) {     const audio = document.getElementById('audio');     if (window.WeixinJSBridge) {       window.WeixinJSBridge.invoke(         'getNetworkType',         {},         function (e) {           audio.play();         },         false       );     } else {       document.addEventListener(         'WeixinJSBridgeReady',         function () {           window.WeixinJSBridge.invoke('getNetworkType', {}, function (e) {             audio.play();           });         },         false       );     }   } else {     this.$refs.audio.play();   }

　　

如果不是打开页面就播放的话，可以用这种方法（微信中亲测有效）：

?

1 2 3 4 5 6 7

<div @touchstart="onstart">     // 代码部分     //音频     <audio id="audio" ref="audio" class="sound">         <source src="@/static/pagesound.mp3" />     </audio> </div>

　　1、触摸页面的时候触发播放

?

1 2 3 4

onstart() {     this.$refs.audio.play();     this.$refs.audio.pause(); }

　　2、播放的时候调用（也可以设置下currentTime = 0）

?

1	this.$refs.audio.play();

 

参考了文章，非常感谢！

https://www.cnblogs.com/jlliu/p/11233373.html

有问题随时交流。