vue项目加背景音乐

 <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都播放不了