這篇文章主要講解了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如何實現歌詞聯動功能有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
