微信小程序实现自定义音频播放

最近开发小程序，发现ios设备用audio原生标签播放不了，后面想了很多办法还是不得行，最后只有自定义一个播放组件。

一、HTML部分

<div
      :key="file.id"
      class="ew-upload-audio"
      @tap="onPlayAudio(file)">
      <div class="ew-upload-audio-file" :class="{'playing': file.playing}"></div>
  </div>

二、JS部分

export default {
    props: {
      file: {
        type: Object
      }
    },
    data() {
      return {
        isPlaying:false,
        playingFile:{},
        innerAudioContext:null
      }
    },
    onUnload() { //卸载页面的时候暂停音频播放以及销毁音频对象
      if(this.innerAudioContext){
        this.innerAudioContext.stop();
        this.innerAudioContext.destroy();
      }
    },
    onHide: function () { //从当前页面跳转到其他页面或者手机息屏暂停音频播放以及状态还原
      if(this.innerAudioContext){
        this.innerAudioContext.stop();
        this.$set(this.playingFile, 'playing', false);
      }
    },
    methods: {
      onPlayAudio(file) {
        if (!this.innerAudioContext) {
          this.innerAudioContext = wx.createInnerAudioContext();//创建内部 audio 上下文 InnerAudioContext 对象
          this.innerAudioContext.onPlay(() => {
            // console.log('开始播放');
            this.$set(this.playingFile, 'playing', true);
          });
          this.innerAudioContext.onStop(() => {
            // console.log('停止播放');
            this.$set(this.playingFile, 'playing', false);
          });
          this.innerAudioContext.onEnded(() => {
            // console.log('播放结束');
            this.$set(this.playingFile, 'playing', false);
          });
          this.innerAudioContext.onError((res) => {
            // console.log(res.errMsg);
            // console.log(res.errCode);
          })
        }
        this.playingFile = file;
        if (this.playingFile.playing) {
          this.innerAudioContext.stop();
        } else {
          this.innerAudioContext.src = file.url;
          this.innerAudioContext.play();
        }
      }
    },
  };