基於better-scroll 實現歌詞聯動功能

前段時間公司要作個歌詞標記功能，標記副歌、前奏、無效內容等等。找了找沒有找到相似的實現，只能本身實現一把。

功能已經上線了，這裏記錄一下用到的相關內容。

需求

1. 能夠拖動進度條修改播放進度
2. 能夠拖動歌詞來修改播放進度
3. 播放時滾動歌詞
4. 標記功能

測試地址：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

參數的做用就是派發 scroll 規則。默認值是 0。
我使用的是 2 ，由於我以爲這個強度就已經夠我使用了（若是你以爲不夠能夠上 3）。

值	描述
0	不派發
1	會非實時（屏幕滑動超過必定時間後）派發scroll 事件
2	會在屏幕滑動的過程當中實時的派發 scroll 事件
3	不只在屏幕滑動的過程當中，並且在 momentum 滾動動畫運行過程當中實時派發 scroll 事件

解析歌詞

這裏我是基於 lyric-parser 這個庫實現的。

由於我在網上找了幾個庫他們都使用的這個，因此我也就沒找咱們公司內部的解析代碼。

lrc 歌詞規則： [分:秒.毫秒]歌詞。

聯動

修改播放進度

這裏我是直接改的 currentTime 來實現。

監聽播放進度

這裏我是監聽 timeupdate 回調，而後獲取 currentTime，再去遍歷歌詞中對應時間的歌詞，觸發滾動效果。

修改音量

安卓是好的。ios 不行，而後被砍了。
這裏是經過 volume 來操做。

微信公衆號：前端linong

歡迎你們關注個人公衆號。有疑問也能夠加個人微信前端交流羣。