epmet-resi-rizhao/components/topicAudio/index.ts

// pages/group/components/topicAudio/index.js
const innerAudioContext = wx.createInnerAudioContext()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    url: {
      type: String,
      default: ''
    },
    duration: {
      type: Number,
      default: 0
    },
    showDel: {
      type: Boolean,
      default: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    totalTime: '',
    stepTime: 0,
    totalMax: 0,
    stepValue: 0,
    hasPlay: false,
    playUrl: ''
  },
  async ready() {
    await this.downLoadAudio()
    console.log('readyyyyyy', this.data.playUrl)
    // this.initAudio()
  },
  lifetimes: {
    detached() {
      innerAudioContext.stop()
      console.log('detached', innerAudioContext)
    },
  },
  
  /**
   * 组件的方法列表
   */
  methods: {
    initDuration() {
      let { totalTime, duration } = this.data
      if (duration) {
        totalTime = this.format(this.data.duration)
        this.setData({
          totalTime,
          totalMax: duration
        })
      }
      console.log('totalMax', this.data.totalMax)
    },
    downLoadAudio() {
      wx.downloadFile({
        url: this.data.url, //仅为示例，并非真实的资源
        success: res => {
          // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
          if (res.statusCode === 200) {
            console.log('res2222222', res)
            this.setData({
              playUrl: res.tempFilePath
            })
            this.initAudio()
          } else {
            wx.showToast({
              title: '音频加载失败',
              icon: 'none',
              duration: 1500
            })
          }
        },
        fail: () => {
          wx.showToast({
            title: '音频加载失败',
            icon: 'none',
            duration: 1500
          })
        }
      })
    },
    initAudio () {
      innerAudioContext.src = this.data.playUrl
      innerAudioContext.autoplay = false
      this.initDuration()
      console.log('ppppplllaaa', innerAudioContext)
      
      innerAudioContext.onCanplay(() => {
        console.log('初始化播放', innerAudioContext.duration)
      })
      innerAudioContext.onPlay(() => {
        console.log('开始播放', innerAudioContext.duration)
        
      })
      
      innerAudioContext.onTimeUpdate(() => {
        console.log("duration-onTimeUpdate", innerAudioContext.duration);
        console.log("currentTime", innerAudioContext.currentTime);
        if (innerAudioContext.duration) {
          this.setData({
            totalMax: (innerAudioContext.duration * 1000),
          })
        }
        this.setData({
          stepValue: (innerAudioContext.currentTime * 1000),
          // totalMax: (innerAudioContext.duration * 1000),
          // totalTime: this.format(innerAudioContext.duration * 1000),
        })
        console.log('stepValue', this.data.stepValue)
        console.log('totalTime', this.data.totalTime)
        console.log('totalMax', this.data.totalMax)
      });
      innerAudioContext.onEnded(() => {
        
        console.log("end");
        this.setData({
          hasPlay: false
        })
      });
      innerAudioContext.onError((res) => {
        console.log("errMsg", res.errMsg);
        wx.showToast({
          title: res.errMsg,
          icon: 'none',
          duration: 1500
        })
      });
    },
    handleBtn() {
      let { hasPlay } = this.data
      if (hasPlay) this.audioPause()
      else this.audioPlay()
    },
    audioPause() {
      innerAudioContext.pause()
      this.setData({
        hasPlay: false
      })
    },
    audioPlay() {
      // if (innerAudioContext.currentTime) innerAudioContext.play()
      // else this.initAudio()
      innerAudioContext.play()
      this.setData({
        hasPlay: true
      })
      console.log('innerAudioContext', innerAudioContext)
    },
    slideChange(e) {
      this.audioPause()
      let value = e.detail.value;
      console.log('slidechange', value)
      innerAudioContext.seek(value/1000)
      this.setData({
        stepValue: value,
      })
      // innerAudioContext.onSeeked(() => {
      //   console.log('onSeeked', innerAudioContext.currentTime)
        
        
      // })
      this.audioPlay()
      
    },
    handleSlideMove(e) {
      
      // let value = e.detail.value;
      this.audioPause()
      // innerAudioContext.seek(value/1000)
      // innerAudioContext.onSeeking(() => {
      //   console.log('onSeeking', innerAudioContext.currentTime)
      //   this.setData({
      //     stepValue: value,
      //   })
      // })
    },
    handleAudioDel() {
      innerAudioContext.stop()
      // innerAudioContext.destroy()
      console.log('innerAudioContextdel', innerAudioContext)
      this.triggerEvent('audiodel')
    },
    format(num) {
      let min = parseInt(num/1000/60)
      let second = parseInt(num/1000)%60
      min = min >= 10 ? min : '0' + min
      second = second >= 10 ? second : '0' + second
      return min + ':' + second
    },
  }
})