BetterScroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件，BetterScroll 是使用純 JavaScript 實現的，這意味著它是無依賴的。本文基於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 來操作。
[qp18502452 ] （vue.js）基於better-scroll 實現歌詞聯動功能的代碼已經有268次圍觀
