<audio
id="cheerMusic"
ref="music"
preload="auto"
loop="loop"
src="http://xxx.com/kyday/2020/voice/actCenter.mp3"
></audio>
在mouted方法中调用播放音乐方法
_this.audioAutoPlay("cheerMusic");
/* 自动播放音乐 */
audioAutoPlay(id) {
let music = document.getElementById(id)
music.play()
let play = function () {
music.play()
document.removeEventListener("touchstart", play, false)
}
music.play()
document.addEventListener("WeixinJSBridgeReady", function () {
play()
}, false)
document.addEventListener('YixinJSBridgeReady', function () {
play()
}, false)
document.addEventListener("touchstart", play, false)
},
onBridgeReady() {
console.log(" WeixinJSBridge.call('hideOptionMenu')")
WeixinJSBridge.call('hideOptionMenu')
},
WeixinJSBridgeReady(){
if (typeof WeixinJSBridge === "undefined") {
console.log('WeixinJSBridge ==== undefined')
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
}
} else {
this.onBridgeReady()
}
}
通过上述code可以完成进入页面自动播放背景音乐
但是ios手机需要点击页面任意一个地方才能开始播放
⚠️注意:上面audio标签中不能设置muted 属性,设置完之后 无论如何ios都自动播放不了