igg4-miniprogram/src/components/freeAudio/index.js

const app = getApp()
import dayjs from 'dayjs'
Component({
  behaviors: [],
  properties: {
    audio: {
      type: Object,
      observer(val) {
        if (val && this._currentAudioUrl && val.url === this._currentAudioUrl) {
          return
        }
        this._currentAudioUrl = val ? val.url : ''
        if (this.audioContext) {
          const { play } = this.data
          if (play) {
            this.audioContext.pause()
            this.setData({
              play: false,
              progress: 0,
              time: '00',
            })
          }
          this.audioContext.destroy()
        }
        if (val) {
          this.audioAddEventListener(val)
        }
      },
    },
  },
  data: {
    Timestamp: app.globalData.Timestamp,
    progress: 0,
    time: '00',
    duration: '00',
    play: false,
    loading: true,

    imageUrl: app.globalData.imageUrl,
    progressimg: true,
  },
  lifetimes: {
    created() {
      app.getTheme().then((res) => {
        this.setData({
          theme: res,
        })
      })
    },
    async attached() {},
    moved() {},
    detached() {
      if (this.audioContext) {
        const { play } = this.data
        if (play) {
          this.audioContext.pause()
        }
        this.audioContext.destroy()
      }
      this.audioAddEventListener = null
      this.setData({
        play: false,
        progress: 0,
        time: '00',
      })
    },
  },
  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () {},
    hide: function () {
      const { play } = this.data
      if (play) {
        this.audioContext.pause()
      }
    },
    resize: function () {},
  },
  methods: {
    togglePlay() {
      const { play, loading } = this.data
      if (loading) {
        wx.showToast({
          title: '音频加载中',
          icon: 'none',
        })
        return
      }
      if (play) {
        this.audioContext.pause()
      } else {
        this.audioContext.play()
      }
    },
    formatTime(time) {
      let m = parseInt(time / 60)
      let s = parseInt(time % 60)
      return this.towNum(m) + ':' + this.towNum(s)
    },
    towNum(num) {
      if (num >= 10) {
        return num
      } else {
        return '0' + num
      }
    },
    audioAddEventListener(val) {
      const that = this
      this.setData({
        duration: this.formatTime(val.size),
      })
      that.audioContext = wx.createInnerAudioContext()
      that.audioContext.src = val.url
      that.setData({
        loading: false,
      })
      that.audioContext.onError(({ errCode, ...reset }) => {
        console.log('reset: ', reset)
        console.log('errCode: ', errCode)
        if (errCode === 10004 || errCode == 10001 || errCode == -1) {
          that.audioContext.destroy()
          that.setData({
            loading: true,
          })
          setTimeout(() => {
            that.audioAddEventListener(val)
          }, 300)
        }
      })
      that.audioContext.onPlay(() => {
        that.setData({
          play: true,
        })
      })
      that.audioContext.onPause(() => {
        console.log(1111111)
        that.setData({
          play: false,
        })
      })
      that.audioContext.onEnded(() => {
        that.audioContext.seek(0)
        that.setData({
          play: false,
          progress: 0,
          time: '00',
        })
      })
      that.audioContext.onTimeUpdate(() => {
        const duration = that.audioContext.duration || 0
        const currentTime = that.audioContext.currentTime || 0
        const progress = (currentTime / duration) * 100
        if (duration == Infinity) {
          return
        }
        that.setData({
          play: true,
          duration: that.formatTime(duration),
          time: that.formatTime(currentTime),
        })
        if (that.data.progressimg) {
          this.setData({
            progress: progress,
          })
        }
      })
    },
    handleAuthChangeimg() {
      console.log(11111)
      this.setData({
        progressimg: false,
      })
    },
    handleAuthChange(e) {
      console.log(22222222222)
      let { duration } = this.data
      const secods = this.audioContext.duration || duration.split(':')[0] * 60 + duration.split(':')[1] * 1
      const progress = e.detail.value
      let seek = ((secods / 100) * progress).toFixed(3) * 1
      this.audioContext.seek(seek)
      this.setData({
        progressimg: true,
      })
    },
  },
})