examcloud-weixin-upload-audio/pages/index/component/AudioPlayer/index.js

// pages/main/component/Player/index.js
var AudioContext = wx.createInnerAudioContext()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    src: {
      type: String,
      observer: function (src) {
        console.log(this.data.auto)
        console.log("audio src changed", src)

        this.stop()
        if (this.data.auto) {
          this.resetAudioContext(src)
        }
      }
    },
    duration: {
      type: Number,
      observer: function(d) {
        this.setData({
          formatDuration: this.formatTimer(d)
        })
      }
    },
    auto: {
      type: Boolean
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    isPlay: false,
    progress: 0,
    formatCurrent: '00:00',
    formatDuration: '00:00'
  },
  audioCallback: null,

  canPlay: false,

  fetchDurationHandler: 0,
  /**
   * 组件的方法列表
   */
  methods: {
    stop: function () {
      AudioContext.stop()

      this.setData({
        isPlay: false,
        progress: 0,
        formatCurrent: '00:00'
      })
    },
    playAction: function (e) {
      if (this.fetchDurationHandler) {
        clearInterval(this.fetchDurationHandler)
      }
      if (!this.data.src) {
        return
      }
      /*if (AudioContext.src != this.data.src) {
        this.resetAudioContext(this.data.src)
      }*/

      console.log('playAction',this.data.isPlay)
      if (this.data.isPlay) {
        this.stop()
      } else {
        AudioContext.play()
      }
    },

    formatTimer: function (currentTime) {
      const minutes = parseInt(currentTime / 60)
      const seconds = parseInt(currentTime % 60)
      var time = ''
      if (minutes > 9) {
        time += minutes
      } else {
        time += '0' + minutes
      }

      time += ':'
      if (seconds > 9) {
        time += seconds
      } else {
        time += '0' + seconds
      }
      return time
    },

    resetAudioContext(src) {
      AudioContext.stop()
      AudioContext.destroy()

      AudioContext = wx.createInnerAudioContext()

      wx.setInnerAudioOption({
        obeyMuteSwitch: false
      })

      AudioContext.offCanplay()
      AudioContext.offPlay()
      AudioContext.offEnded()
      AudioContext.offStop()
      AudioContext.offTimeUpdate()
      AudioContext.offError()

      this.canPlay = false
      this.setData({
        isPlay: false,
        progress: 0,
        formatCurrent: '00:00',
        formatDuration: '00:00'
      })
      const that = this
      AudioContext.onCanplay(() => {
        console.log("onCanPlay", AudioContext, AudioContext.duration)
        that.canPlay = true

        setTimeout(function () {
          const formatDuration = that.formatTimer(AudioContext.duration)
          that.setData({
            formatCurrent: '00:00',
            formatDuration: formatDuration
          })
        }, 500)
      })
      AudioContext.onPlay(() => {
        console.log("onPlay")
        that.setData({
          isPlay: true,
        })
      })

      AudioContext.onEnded(() => {
        console.log("onEnded")
        const formatCurrent = that.formatTimer(AudioContext.duration)
        that.setData({
          isPlay: false,
          formatCurrent: formatCurrent,
          progress: 100
        })
      })

      AudioContext.onStop(() => {
        console.log("onStop")
        that.setData({
          isPlay: false,
          formatCurrent: '00:00',
          progress: 0
        })
      })
      AudioContext.onTimeUpdate(() => {
        console.log("onTimeUpdate")
        const formatCurrent = that.formatTimer(AudioContext.currentTime)
        const formatDuration = that.formatTimer(AudioContext.duration)
        that.setData({
          progress: parseInt(100 * AudioContext.currentTime / AudioContext.duration),
          formatCurrent: formatCurrent,
          formatDuration: formatDuration
        })
      })
      AudioContext.onError(error => {
        if (this.fetchDurationHandler) {
          clearInterval(this.fetchDurationHandler)
        }
        console.log("onError", error)
        var errMessage = ''
        switch (error.errCode) {
          case 10001:
            errMessage = '系统错误'
            break;
          case 10002:
            errMessage = '网络错误'
            break;
          case 10003:
            errMessage = '文件错误'
            break;
          case 10004:
            errMessage = '格式错误'
            break;
          default:
            errMessage = '未知错误'
            break;
        }
        console.log(errMessage)
        wx.showToast({
          title: errMessage,
          icon: 'warn',
          duration: 2500
        })
        that.setData({
          isPlay: false,
          formatCurrent: '00:00',
          formatDuration: '00:00',
          progress: 0
        })
        if (that.audioCallback) {
          that.audioCallback(AudioContext.src)
        }
      })

      if (this.data.src) {
        AudioContext.src = this.data.src
      }
      AudioContext.autoplay = this.data.auto
    },

    audioCallback: function (callback) {
      this.audioCallback = callback
    }
  },

  attached() {
    this.resetAudioContext()
    const that = this

    wx.onAudioInterruptionBegin(function () {
      console.log('player onAudioInterruptionBegin')
      if (that.data.isPlay) {
        that.stop()
      }
    })

    wx.onAppHide(function () {
      console.log('player onAppHide')
      console.log(that.data.isPlay)
      if (that.data.isPlay) {
        that.stop()
      }
    })
    wx.onAppShow(function () {
      console.log("player onAppShow")
      if (that.data.src && !that.canPlay) {
        that.resetAudioContext(that.data.src)
      }
    })
  },
  detached() {
    AudioContext.stop()
    AudioContext.destroy()

    wx.offAudioInterruptionBegin(() => {
      console.log('player offAudioInterruptionBegin')
    })
    wx.offAppHide(() => {
      console.log('player offAppHide')
    })
  }
})