Vue解决ios获取音频时长--WeixinJSBridgeReady

//App.vue 
import { mapState, mapMutations, mapActions } from 'vuex'
computed: {
    ...mapState(['audios'])
},
mounted() {
  this.initAudio();
  // 跳桥事件
  document.addEventListener(
    "WeixinJSBridgeReady", () => {
      //vuex存取预先准备的虚拟音频dom，读取之后播放然后静音，获取canplay事件
      this.audios.forEach(dom => {
        dom.play(); 
        dom.defaultMuted = true;
        dom.preload = true;
        dom.addEventListener("canplay", this.addPlay);
      });
    },
    false
  );
},
methods: {
  ...mapMutations(["initAudio"]),
  addPlay(event) {
    // canplay事件准备好之后，播放暂停移除监听事件
    // console.log( event )
    // console.log( event.target )
    event.target.pause();
    event.target.removeEventListener("canplay", this.addPlay);
  },
},


//vuex  store.js 
state: {
  audios: [],
},
mutations: {
  //app里调用初始化dom
  initAudio(state) {
    state.audios = []
    for (let i = 0; i < 5; i++) {
      let dom = document.createElement("audio")
      dom.muted = true
      dom.defaultMuted = true
      dom.preload = true
      dom.src = `/upload/MP3/${i + 1}.mp3` //服务器预先存好的音频
      state.audios.push(dom)
    }
  },
}
//具体音源调用页面
<audio  src="https://mp3.haoge500.com/tuijian/2015/06-24/665180.mp3" ref="audio" controls @timeupqdate="update" ></audio >

import { mapState, mapMutations, mapActions } from 'vuex'
data() {
  return {
    totalTime: 0, // 播放总时间--秒
  }
},

computed: {
    ...mapState({
      audios: "audios"
    }),
}
// 音频缓存完毕,针对单音频的获取时长
loadingFinish() {
    var obj = this.$refs.audio
    if (this.audios[0]) {
      obj.dom = this.audios[0];
    } else {
      obj.dom = document.createElement("audio");
    }
    obj.dom.src = obj.src;
    obj.dom.preload = true;
    obj.dom.muted = false;
    obj.dom.defaultMuted = false;
    obj.time = 0;
    if (this.audios[0]) {
      obj.dom.load();
      obj.dom.currentTime = 0;
    }
    let _this = this;
    (obj => {
      function setDra() {
        obj.time = parseInt(obj.dom.duration);
        obj.dom.removeEventListener("canplay", setDra);
        _this.totalTime = obj.time
      }
      obj.dom.addEventListener("canplay", setDra);
    })(obj);
  },
 // 音频缓存完毕,针对音频列表的获取时长  
  loadingFinish() {
      this.$http.post("/ajax地址", {
          id: this.$route.params.id
      }).then(({ data }) => {
          data.forEach((obj, index) => {
              obj.active = false;
              if (this.audios[index]){
                obj.dom = this.audios[index];
              } else {
                obj.dom = document.createElement("audio");
              } 
              obj.dom.src = obj.Voice;
              obj.dom.preload = true;
              obj.dom.muted = false;
              obj.dom.defaultMuted = false;
              obj.time = 0;
              if (this.audios[index]) {
                  obj.dom.load();
                  obj.dom.currentTime = 0;
              }
              // obj.dom.play()
              (obj => {
                  function setDra() {
                      // obj.dom.pause()
                      // obj.dom.currentTime = 0
                      obj.time = parseInt(obj.dom.duration);
                      obj.dom.removeEventListener("canplay", setDra);
                  }
                  obj.dom.addEventListener("canplay", setDra);
                  // obj.dom.addEventListener("ended", () => {
                  //     if (this.list[this.currentIndex + 1]) {
                  //         this.currentIndex++;
                  //         this.initPPT();
                  //     }
                  // });
              })(obj);
          });
          this.list = data;
          this.initPPT();
      });
  },