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

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

代码可在文末下载

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

1. wx.getBackgroundAudioManager()

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

1. 音频播放进度，建议在这个方法里更新当前播放时间，而不是自己另写一个计时器计时，因为当你狂按暂停播放的时候，你会发现计时器没走，音频却走了
2. audioManager.onTimeUpdate()
3.  
4. 缓冲
5. audioManager.onWaiting()
6.  
7. 音频播放结束
8. audioManager.onEnded()
9.  
10. 快进 该方法快进到音频还剩6-10秒时在跳转到前面的时间会失效，目前还不知道原因，有知道的同学请留言解释一下
11. audioManager.seek()
12.  
13. 暂停
14. audioManager.pause()
15.  
16. 播放
17. audioManager.play()
18.  
19. 停止
20. audioManager.stop()

用到的属性如下

1. audioManager.title
2. audioManager.epname
3. audioManager.singer
4. audioManager.coverImgUrl
5. audioManager.src
6. audioManager.paused
7. audioManager.buffered

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

1. // 点击slider时调用
2. sliderTap: function (e) {
3. console.log("sliderTap")
4. this.seek()
5. },
6.  
7. // 开始滑动时
8. sliderStart: function (e) {
9. console.log("sliderStart")
10. },
11.  
12. // 正在滑动
13. sliderChange: function (e) {
14. console.log("sliderChange")
15. },
16.  
17. // 滑动结束
18. sliderEnd: function (e) {
19. console.log("sliderEnd")
20. this.seek()
21. },
22.  
23. // 滑动取消 （左滑时滑到上一页面或电话等情况）
24. sliderCancel: function (e) {
25. console.log("sliderCancel")
26. this.seek()
27. },

有问题请留言哦！