better-scroll如何實現(xiàn)歌詞聯(lián)動功能

這篇文章主要講解了better-scroll如何實現(xiàn)歌詞聯(lián)動功能，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

為柳城等地區(qū)用戶提供了全套網頁設計制作服務，及柳城網站建設行業(yè)解決方案。主營業(yè)務為網站設計、成都網站建設、柳城網站設計，以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

BetterScroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。它的核心是借鑒的 iscroll 的實現(xiàn)，它的 API 設計基本兼容 iscroll，在 iscroll 的基礎上又擴展了一些 feature 以及做了一些性能優(yōu)化。

BetterScroll 是使用純 JavaScript 實現(xiàn)的，這意味著它是無依賴的。

正文

前段時間公司要做個歌詞標記功能，標記副歌、前奏、無效內容等等。找了找沒有找到類似的實現(xiàn)，只能自己實現(xiàn)一把。

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

需求

• 可以拖動進度條修改播放進度
• 可以拖動歌詞來修改播放進度
• 播放時滾動歌詞
• 標記功能

測試地址：https://www.lilnong.top/stati ...

實現(xiàn)

技術棧是 Vue + vant + better-scroll。
開始調研的時候使用 vant 的 Picker 來實現(xiàn)了一下，發(fā)現(xiàn)滾動歌詞的時候沒有動畫，很難受改用了 better-scroll。

better-scroll

better-scroll 文檔

betterScrollList = new BScroll(wrapper,{
 probeType: 2, // 因為默認是不會調用 scroll 回調的，所以需要設置
 swipeTime: 300
})
betterScrollList.on('scroll', ()=>{
 //暫停歌曲
 //獲取當前用戶拖動的歌詞，計算規(guī)則如下
  // 當前y / 最大y * 歌詞行數(shù)
  // 當前y就是滾動的了多少
  // 最大y可以理解為高度
  // 上面計算出來就是進度比例。然后換算到行數(shù)就ok
})
betterScrollList.on('scrollEnd', ()=>{
 // 這里是校準到拖動歌詞的位置
 // 播放歌曲
})

probeType

解析歌詞

這里我是基于lyric-parser 這個庫實現(xiàn)的。

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

lrc 歌詞規(guī)則： [分:秒.毫秒]歌詞。

聯(lián)動

修改播放進度

這里我是直接改的 currentTime 來實現(xiàn)。

監(jiān)聽播放進度

這里我是監(jiān)聽 timeupdate 回調，然后獲取 currentTime，再去遍歷歌詞中對應時間的歌詞，觸發(fā)滾動效果。

修改音量

安卓是好的。ios 不行，然后被砍了。
這里是通過 volume 來操作。

看完上述內容，是不是對better-scroll如何實現(xiàn)歌詞聯(lián)動功能有進一步的了解，如果還想學習更多內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。