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

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

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

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

正文

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

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

需求

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

測(cè)試地址：https://www.lilnong.top/stati ...

實(shí)現(xiàn)

技術(shù)棧是 Vue + vant + better-scroll。
開始調(diào)研的時(shí)候使用 vant 的 Picker 來(lái)實(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ì)算出來(lái)就是進(jìn)度比例。然后換算到行數(shù)就ok
})
betterScrollList.on('scrollEnd', ()=>{
 // 這里是校準(zhǔn)到拖動(dòng)歌詞的位置
 // 播放歌曲
})

probeType

解析歌詞

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

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

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

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

修改播放進(jìn)度

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

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

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

修改音量

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

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

文章名稱：better-scroll如何實(shí)現(xiàn)歌詞聯(lián)動(dòng)功能
文章轉(zhuǎn)載：http://chinadenli.net/article8/jpsgip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、移動(dòng)網(wǎng)站建設(shè)、App設(shè)計(jì)、網(wǎng)站排名、網(wǎng)站收錄、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)