快捷導(dǎo)航

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

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

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

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

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

正文

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

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

需求

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

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

實現(xiàn)

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

better-scroll

better-scroll 文檔

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

probeType

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

解析歌詞

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

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

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

聯(lián)動

修改播放進度

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

監(jiān)聽播放進度

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

修改音量

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

總結(jié)

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

您可能感興趣的文章: