快捷導(dǎo)航

基于better-scroll 實(shí)現(xiàn)歌詞聯(lián)動(dòng)功能的代碼

更新時(shí)間：2020年05月07日 09:36:13 作者：linong

BetterScroll 是一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場景需求的插件，BetterScroll 是使用純 JavaScript 實(shí)現(xiàn)的，這意味著它是無依賴的。本文基于better-scroll 實(shí)現(xiàn)歌詞聯(lián)動(dòng)功能，感興趣的朋友跟隨小編一起看看吧

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

值	描述
0	不派發(fā)
1	會(huì)非實(shí)時(shí)（屏幕滑動(dòng)超過一定時(shí)間后）派發(fā)scroll 事件
2	會(huì)在屏幕滑動(dòng)的過程中實(shí)時(shí)的派發(fā) scroll 事件
3	不僅在屏幕滑動(dòng)的過程中，而且在 momentum 滾動(dòng)動(dòng)畫運(yùn)行過程中實(shí)時(shí)派發(fā) scroll 事件

解析歌詞

這里我是基于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，再去遍歷歌詞中對應(yīng)時(shí)間的歌詞，觸發(fā)滾動(dòng)效果。

修改音量

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

總結(jié)

到此這篇關(guān)于基于better-scroll 實(shí)現(xiàn)歌詞聯(lián)動(dòng)功能的代碼的文章就介紹到這了,更多相關(guān)better-scroll 實(shí)現(xiàn)歌詞聯(lián)動(dòng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: