基於better-scroll 實現歌詞聯動功能的程式碼
BetterScroll 是一款重點解決移動端（已支援 PC）各種滾動場景需求的外掛。它的核心是借鑑的 iscroll 的實現，它的 API 設計基本相容 iscroll，在 iscroll 的基礎上又擴充套件了一些 feature 以及做了一些效能優化。
BetterScroll 是使用純 JavaScript 實現的，這意味著它是無依賴的。
正文
前段時間公司要做個歌詞標記功能，標記副歌、前奏、無效內容等等。找了找沒有找到類似的實現，只能自己實現一把。
功能已經上線了，這裡記錄一下用到的相關內容。
需求
- 可以拖動進度條修改播放進度
- 可以拖動歌詞來修改播放進度
- 播放時滾動歌詞
- 標記功能
測試地址：https://www.lilnong.top/stati ...
實現
技術棧是 Vue + vant + better-scroll。
開始調研的時候使用 vant 的 Picker 來實現了一下，發現滾動歌詞的時候沒有動畫，很難受改用了 better-scroll。
better-scroll
better-scroll 文件
betterScrollList = new BScroll(wrapper,{
probeType: 2,// 因為預設是不會呼叫 scroll 回撥的，所以需要設定
swipeTime: 300
})
betterScrollList.on('scroll',()=>{
//暫停歌曲
//獲取當前使用者拖動的歌詞，計算規則如下
// 當前y / 最大y * 歌詞行數
// 當前y就是滾動的了多少
// 最大y可以理解為高度
// 上面計算出來就是進度比例。然後換算到行數就ok
})
betterScrollList.on('scrollEnd',()=>{
// 這裡是校準到拖動歌詞的位置
// 播放歌曲
})probeType
| 值 | 描述 |
|---|---|
| 0 | 不派發 |
| 1 | 會非實時（螢幕滑動超過一定時間後）派發scroll 事件 |
| 2 | 會在螢幕滑動的過程中實時的派發scroll 事件 |
| 3 | 不僅在螢幕滑動的過程中，而且在 momentum 滾動動畫執行過程中實時派發scroll 事件 |
解析歌詞
這裡我是基於lyric-parser 這個庫實現的。
因為我在網上找了幾個庫他們都使用的這個，所以我也就沒找我們公司內部的解析程式碼。
lrc 歌詞規則： [分:秒.毫秒]歌詞。
聯動
修改播放進度
這裡我是直接改的 currentTime 來實現。
監聽播放進度
這裡我是監聽 timeupdate 回撥，然後獲取 currentTime，再去遍歷歌詞中對應時間的歌詞，觸發滾動效果。
修改音量
安卓是好的。ios 不行，然後被砍了。
這裡是通過 volume 來操作。
總結
到此這篇關於基於better-scroll 實現歌詞聯動功能的程式碼的文章就介紹到這了,更多相關better-scroll 實現歌詞聯動內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！