H5页面中添加audio标签,通过调用play()方法进行播放音频,电脑可以正常听到音效,微信中打开没有声音。
<audio id="audio" ref="audio" class="sound"> <source src="@/static/pagesound.mp3" /> </audio>
播放方法:
this.$refs.audio.play();
调用了播放方法,手机上没有看到音频在播放,设置了muted静音之后,可以看到音频进度条在走了,但是我们需要声音呀。后续尝试更改muted为false也不管用。
网上搜了搜相关问题,发现了微信的api可以解决音频在微信中不播放的问题,具体如下:
1、引入微信的api,在微信公众号下载就可以(https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3)
import wx from './jweixin-1.6.0.js';
2、检测是否在微信环境
const UA = window.navigator.userAgent; const wechat = UA.includes('MicroMessenger') && !UA.includes('miniProgram')
3、调用方法:
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(); }
如果不是打开页面就播放的话,可以用这种方法(微信中亲测有效):
<div @touchstart="onstart"> // 代码部分 //音频 <audio id="audio" ref="audio" class="sound"> <source src="@/static/pagesound.mp3" /> </audio> </div>
1、触摸页面的时候触发播放
onstart() { this.$refs.audio.play(); this.$refs.audio.pause(); }
2、播放的时候调用(也可以设置下currentTime = 0)
this.$refs.audio.play();
参考了文章,非常感谢!
https://www.cnblogs.com/jlliu/p/11233373.html
有问题随时交流。
标签:play,audio,微信,refs,h5,播放,音频 From: https://www.cnblogs.com/mihoutaoguniang/p/17227092.html