vue项目的自动播放背景音乐

data() {
      return {
          isOff:true
      }
    },

mounted() {
        // 自动播放音乐效果，解决微信自动播放问题
       document.addEventListener('touchstart',this.audioAutoPlay,false);
       document.addEventListener('WeixinJSBridgeReady', this.audioAutoPlay,false);
       let oAudio = document.querySelector("#audio");
        oAudio.onended = function () {//播放完毕，重新循环播放
            oAudio.load();
            oAudio.play();
        }
    },

methods: { 
           changeOn(){
                let oAudio = document.querySelector("#audio");
               if(this.isOff){
                oAudio.play();//让音频文件开始播放     
               }else{
                oAudio.pause();//让音频文件暂停播放 
               }
               this.isOff = !this.isOff;
           },
           audioAutoPlay() {
                let audio = document.getElementById('audio');
                    this.isOff = false;
                    audio.play();
                document.removeEventListener('touchstart',this.audioAutoPlay);
            }
    }

bty…理论上vue是无法自动播放，需要借助微信的一个接口，注意在其他页面做监听无法接收到微信的回调，一定要在App.vue页面，放上这一段：

mounted() {
            this.audioAutoPlay('audio');
            // 自动播放音乐效果，解决微信自动播放问题
            document.addEventListener('touchstart',this.audioAutoPlay,false);
            document.addEventListener('WeixinJSBridgeReady', this.audioAutoPlay,false);
            let oAudio = document.querySelector("#audio");
            oAudio.onended = function () {//播放完毕，重新循环播放
                oAudio.load();
                oAudio.play();
            }
        },