微信小程序,封装音频管理-innerAudioContext

1,477 阅读2分钟

音频管理方法封装

注册调用

    const AudioManage = InnerAudio()
    AudioManage.create()

注册方法create接收一个对象 Object 参数对照 innerAudioContext API 的各事件监听回调(未加入onWaiting 钩子,如需要可自行在create方法中添加)

这里举个例子:
audioManage.create({
    onPlay: (config) => { },
    onPause: (config) => { },
    onEnded: (config) => { },
    onStop: (config) => { }
})

*** 在 create 注册方法中 各个事件监听钩子都会 返回 音频管理的实例 innerAudioContext **

// 开始/切换播放音频
audioManage.toggle('http://xxxxxxx.mp3')

方法API

API参数说明
play-播放
pause-暂停到指定时间
seek-跳转
stop-停止
destroy-销毁音频管理(清除所有监听事件)
toggle详见下方说明切换音频播放
playSection详见下方说明播放指定时间的音频片段

tips: 应先使用toggle播放音频之后才能使用playSection

toggle(audioSrc, pauseTime, callback)

参数类型是否必填说明
audioSrcString音频地址
pauseTimeNumber-暂停时间(0, 表示不暂停)
callbackFunction-播放完毕执行的回调函数

playSection(actionTime, pauseTime, callback)

参数类型是否必填说明
actionTimeNumber开始播放的时间
pauseTimeNumber-暂停时间(0, 表示不暂停)
callbackFunction-播放完毕执行的回调函数

代码如下:

/**
   * let innerAudioContext = InnerAudio()
   * innerAudioContext.create()
   * // 切换音频 src: 音频地址 ;puaseTime: 暂停时间 (可选参数)时间单位: s
   * innerAudioContext.toggle(src, puaseTime) 
   * // 切换音频 actionTIme: 开始时间 ; puaseTime: 暂停时间 (可选参数) 时间单位: s
   * innerAudioContext.playSection(actionTIme, puaseTime) 
   */
  InnerAudio() {
    class AudioManage {
      constructor() {
        this.InnerAudioContext = wx.createInnerAudioContext()
        this._playing_ = false
        this.puseTime = 0
        this.callBack = undefined
      }
      // 初始化配置
      create(config = {}) {
        // 监听音频 播放开始 操作的事件
        this.InnerAudioContext.onPlay(() => {
          console.log('开始播放---');
          if (!this._playing_) this._playing_ = true
          if (typeof config.onPlay === 'function') config.onPlay(this.InnerAudioContext)
        })
        // 监听音频 可以播放 操作的事件
        this.InnerAudioContext.onCanplay(() => {
          console.log('onCanplay---');
          if (!this._playing_) this.play()
          if (typeof config.onCanplay === 'function') config.onCanplay(this.InnerAudioContext)
        })
        // 监听音频 播放完毕 操作的事件
        this.InnerAudioContext.onEnded(() => {
          console.log('onEnded---');
          if (this._playing_) this._playing_ = false
          this.actionCallback()
          if (typeof config.onEnded === 'function') config.onEnded(this.InnerAudioContext)
        })
        // 监听音频 停止 操作的事件
        this.InnerAudioContext.onStop(() => {
          console.log('onStop---');
          if (this._playing_) this._playing_ = false
          if (typeof config.onStop === 'function') config.onStop(this.InnerAudioContext)
        })
        // 监听音频 暂停 操作的事件
        this.InnerAudioContext.onPause(() => {
          console.log('onPause---');
          if (this._playing_) this._playing_ = false
          if (typeof config.onPause === 'function') config.onPause(this.InnerAudioContext)
        })
        // 监听音频 进行跳转 操作的事件
        this.InnerAudioContext.onSeeking(() => {
          console.log('onSeeking---');
          if (typeof config.onSeeking === 'function') config.onSeeking(this.InnerAudioContext)
        })
        // 监听音频 完成跳转 操作的事件
        this.InnerAudioContext.onSeeked(() => {
          console.log('onSeeked---');
          if (!this._playing_) this.play()
          if (typeof config.onSeeked === 'function') config.onSeeked(this.InnerAudioContext)
        })
        // 监听音频 播放进度更新 事件
        this.InnerAudioContext.onTimeUpdate(() => {
          if (this.puseTime > 0) {
            if (this.InnerAudioContext.currentTime >= this.puseTime) {
              this.puseTime = 0
              this.pause()
              // this.stop()
              this.actionCallback()
            }
          }
          if (typeof config.onTimeUpdate === 'function') config.onTimeUpdate(this.InnerAudioContext)
        })
        // 监听音频 播放错误 事件
        this.InnerAudioContext.onError(() => {
          wx.showToast({
            title: '播放失败,请稍后再试吧',
            icon: 'none',
            duration: 3000
          })
          if (typeof config.onError === 'function') config.onPlay(this.InnerAudioContext)
        })
        console.log('音频管理初始化完成');
      }
      // 执行 callBack 方法 并将其销毁
      actionCallback() {
        if (typeof this.callBack === 'function') this.callBack(this.InnerAudioContext)
        this.callBack = undefined
      }
      // 音频切换
      toggle(src, puseTime = 0, callBack = undefined) {
        this.puseTime = puseTime
        this.callBack = () => {
          const timer = setTimeout(() => {
            clearTimeout(timer)
            if (typeof callBack === 'function') callBack()
          }, 150);
        }
        if (!src) return console.log('----音频为空----');
        if (this.InnerAudioContext.src === src) {
          this.play()
        } else {
          if (this._playing_) this.stop()
          this.InnerAudioContext.src = src
        }
      }
      // 播放片段
      playSection(actionTime, puseTime, callBack = undefined) {
        if (!this._playing_) this.play()
        this.puseTime = puseTime
        this.callBack = () => {
          const timer = setTimeout(() => {
            clearTimeout(timer)
            if (typeof callBack === 'function') callBack()
          }, 150);
        }
        this.seek(actionTime)
      }
      // 音频播放
      play() {
        this.InnerAudioContext.play()
      }
      // 音频暂停
      pause() {
        this.InnerAudioContext.pause()
      }
      // 音频时间跳转 - 跳转的时间,单位 s。精确到小数点后 3 位
      seek(Time) {
        this.InnerAudioContext.seek(Time)
      }
      // 音频停止
      stop() {
        this.InnerAudioContext.stop()
      }
      // 销毁 音频播放实例
      destroy() {
        this.InnerAudioContext.stop()
        this.InnerAudioContext.offCanplay()
        this.InnerAudioContext.offStop()
        this.InnerAudioContext.offEnded()
        this.InnerAudioContext.offError()
        this.InnerAudioContext.offPlay()
        this.InnerAudioContext.offPause()
        this.InnerAudioContext.offSeeked()
        this.InnerAudioContext.offSeeking()
        this.InnerAudioContext.offTimeUpdate()
        this.InnerAudioContext.destroy()
      }
    }
    return new AudioManage()
  }