關於 Vue 微信客戶端 不能播放音樂（報錯和不能播放的問題）

前言

用vue 作音樂播放的時候，在本地能夠打開播放，但在微信裏面不能播放音樂

因此這樣解決

  // 音樂播放
    audioPlay(){
      let _this = this;
      var audio = _this.music;
      if(_this.bgmUrl){
        audio.src = _this.bgmUrl;
        //audio.play();
        _this.esPlayMusic();
        _this.timeupdate();
        wx.ready(()=>{
        })
        typeof WeixinJSBridge !== 'undefined' && WeixinJSBridge.invoke('getNetworkType', {}, function (res) {
          //audio.play();
          _this.esPlayMusic();
          _this.timeupdate();
       });
      }
    },
    timeupdate() {
      let _this = this;
      var audio = _this.music;
        audio.addEventListener("timeupdate", function() {
            var duration = this.duration;
            var currentTime = this.currentTime;
            var percentage = (currentTime / duration) * 100;
            if (percentage == 100) {
              _this.audioPlay();
                typeof WeixinJSBridge !== 'undefined' && WeixinJSBridge.invoke('getNetworkType', {}, function (res) {
              _this.audioPlay();
               });
            }
        })
    },

 

主要是這段代碼

 typeof WeixinJSBridge !== 'undefined' && WeixinJSBridge.invoke('getNetworkType', {}, function (res) {
          //audio.play();
          _this.esPlayMusic();
          _this.timeupdate();
       });

 

後來又由於   點擊過快 出現報錯了

The play() request was interrupted by a call to pause()

由於上一個用戶的播報還沒結束，這一個播報就要覆蓋上來了，因此須要異步處理下

上代碼了

// 異步加載音樂播放
    esPlayMusic(){
      let _this = this;
      //let audio = document.getElementById("audioPlay");
      var audio = _this.music;
      //audio.play();
      var playPromise = audio.play();
       if (playPromise) {  
          playPromise.then(() => {
              // 音頻加載成功
              // 音頻的播放須要耗時
              setTimeout(() => {
                  // 後續操做
                  //console.log("done");
              }, audio.duration * 1000); // audio.duration 爲音頻的時長單位爲秒
 
          }).catch((e) => {
              //console.log("Operation is too fast, audio play fails");
          });
      }
    },

這樣就解決了