上面兩篇文章介紹了一下自定義的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. },

有問題請留言哦！