上面兩篇文章介紹了一下自定義的progress 和 slider 組件，這篇文章介紹一下slider組件應(yīng)用的實(shí)例

代碼可在文末下載

這里的音頻播放用的是后臺(tái)音頻播放的API:

1. wx.getBackgroundAudioManager()

在js文件中初始化這個(gè)api（全局）  需要用到該對象的方法如下

1. 音頻播放進(jìn)度，建議在這個(gè)方法里更新當(dāng)前播放時(shí)間，而不是自己另寫一個(gè)計(jì)時(shí)器計(jì)時(shí)，因?yàn)楫?dāng)你狂按暫停播放的時(shí)候，你會(huì)發(fā)現(xiàn)計(jì)時(shí)器沒走，音頻卻走了
2. audioManager.onTimeUpdate()
3.  
4. 緩沖
5. audioManager.onWaiting()
6.  
7. 音頻播放結(jié)束
8. audioManager.onEnded()
9.  
10. 快進(jìn) 該方法快進(jìn)到音頻還剩6-10秒時(shí)在跳轉(zhuǎn)到前面的時(shí)間會(huì)失效，目前還不知道原因，有知道的同學(xué)請留言解釋一下
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

以下五個(gè)方法監(jiān)聽slider的滑動(dòng)和點(diǎn)擊事件  在tap end 和 cancel 方法里執(zhí)行seek事件

1. // 點(diǎn)擊slider時(shí)調(diào)用
2. sliderTap: function (e) {
3. console.log("sliderTap")
4. this.seek()
5. },
6.  
7. // 開始滑動(dòng)時(shí)
8. sliderStart: function (e) {
9. console.log("sliderStart")
10. },
11.  
12. // 正在滑動(dòng)
13. sliderChange: function (e) {
14. console.log("sliderChange")
15. },
16.  
17. // 滑動(dòng)結(jié)束
18. sliderEnd: function (e) {
19. console.log("sliderEnd")
20. this.seek()
21. },
22.  
23. // 滑動(dòng)取消 （左滑時(shí)滑到上一頁面或電話等情況）
24. sliderCancel: function (e) {
25. console.log("sliderCancel")
26. this.seek()
27. },

有問題請留言哦！