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

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

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

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

正文

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

功能已經(jīng)上線了，這里記錄一下用到的相關(guān)內(nèi)容。

需求

• 可以拖動(dòng)進(jìn)度條修改播放進(jìn)度
• 可以拖動(dòng)歌詞來修改播放進(jìn)度
• 播放時(shí)滾動(dòng)歌詞
• 標(biāo)記功能

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

實(shí)現(xiàn)

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

better-scroll

better-scroll 文檔

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

probeType

解析歌詞

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

因?yàn)槲以诰W(wǎng)上找了幾個(gè)庫他們都使用的這個(gè)，所以我也就沒找我們公司內(nèi)部的解析代碼。

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

聯(lián)動(dòng)

修改播放進(jìn)度

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

監(jiān)聽播放進(jìn)度

這里我是監(jiān)聽 timeupdate 回調(diào)，然后獲取 currentTime，再去遍歷歌詞中對(duì)應(yīng)時(shí)間的歌詞，觸發(fā)滾動(dòng)效果。

修改音量

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

看完上述內(nèi)容，是不是對(duì)better-scroll如何實(shí)現(xiàn)歌詞聯(lián)動(dòng)功能有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。