小程序 自定义slider组件音频播放实例

上面两篇文章介绍了一下自定义的progress 和 slider 组件，这篇文章介绍一下slider组件应用的实例

代码可在文末下载

这里的音频播放用的是后台音频播放的API:

wx.getBackgroundAudioManager()

在js文件中初始化这个api（全局）
需要用到该对象的方法如下

音频播放进度，建议在这个方法里更新当前播放时间，而不是自己另写一个计时器计时，因为当你狂按暂停播放的时候，你会发现计时器没走，音频却走了
audioManager.onTimeUpdate() 

缓冲
audioManager.onWaiting()

音频播放结束
audioManager.onEnded()

快进 该方法快进到音频还剩6-10秒时在跳转到前面的时间会失效，目前还不知道原因，有知道的同学请留言解释一下
audioManager.seek()

暂停
audioManager.pause()

播放
audioManager.play()

停止
audioManager.stop()

用到的属性如下

audioManager.title
audioManager.epname
audioManager.singer
audioManager.coverImgUrl
audioManager.src
audioManager.paused
audioManager.buffered

以下五个方法监听slider的滑动和点击事件
在tap end 和 cancel 方法里执行seek事件

// 点击slider时调用
  sliderTap: function (e) {
    console.log("sliderTap")
    this.seek()
  },

  // 开始滑动时
  sliderStart: function (e) {
    console.log("sliderStart")
  },

  // 正在滑动
  sliderChange: function (e) {
    console.log("sliderChange")
  },

  // 滑动结束
  sliderEnd: function (e) {
    console.log("sliderEnd")
    this.seek()
  },

  // 滑动取消 （左滑时滑到上一页面或电话等情况）
  sliderCancel: function (e) {
    console.log("sliderCancel")
    this.seek()
  },

有问题请留言哦！

下载地址: demo

************ 更新 ***********
1、添加了控制监听的参数isMonitoring, 在滑动时取消ontimeupdate监听