在做移動(dòng)端酷我音樂的時(shí)候，發(fā)現(xiàn)歌詞隨著音樂滾動(dòng)是一個(gè)小難點(diǎn)，說難也不難，但是說簡單的話也不簡單。大家請(qǐng)求歌詞返回的類型可能不太一樣，但是判斷邏輯都是一樣的。

左邊是我的歌曲詳情頁面，右邊的是我的歌詞請(qǐng)求數(shù)據(jù)的形式，時(shí)間和歌詞是一一對(duì)應(yīng)的。

先盤下讓歌詞實(shí)時(shí)滾動(dòng)的邏輯：

（下文為了便于區(qū)分兩個(gè)時(shí)間參數(shù)，用newTime來表示實(shí)時(shí)獲取的歌詞時(shí)間，lrcTime表示請(qǐng)求數(shù)據(jù)中歌詞的時(shí)間）

1、獲取當(dāng)前歌詞播放的時(shí)間

2、讓newTime與lrcTime相比較，當(dāng)newTime>lrcTime時(shí)，讓lrcTime的歌詞展示在展示區(qū)域中

先來說說第一個(gè)，調(diào)用audio自帶的方法：timeupdate來實(shí)時(shí)獲取歌詞

this.$refs.lrc是獲取audio的標(biāo)簽?

dom操作：在audio標(biāo)簽中添加 ref=”自定義名字“，js中用“this.$refs.自定義名字”? 進(jìn)行獲取當(dāng)前的dom節(jié)點(diǎn)

使用audio便簽的方法timeupdate來獲取當(dāng)前newTime

第二個(gè)

讓歌詞如何實(shí)時(shí)滾動(dòng)，就上唱完的歌詞往上走，未唱的歌詞往上頂。

給渲染歌詞列表的ul添加一個(gè)相對(duì)定位，給每一行歌詞設(shè)置一個(gè)高度，當(dāng)這一句歌詞唱完之后，ul整體向上平移一行歌詞的高度，這樣就實(shí)現(xiàn)的歌詞的滾動(dòng)

用過? timeupdate? 這個(gè)方法的都知道，它會(huì)一直進(jìn)行返回歌曲時(shí)間，一秒之內(nèi)返回4次往上，顯然這個(gè)值用來執(zhí)行for循環(huán)比較，因?yàn)檫@樣的話，會(huì)在一秒之內(nèi)執(zhí)行4次循環(huán)，對(duì)瀏覽器的負(fù)擔(dān)很大。

將它返回的所有值放到一個(gè)新的數(shù)組中，將重復(fù)的數(shù)值去掉，然后用watch方法來監(jiān)聽這個(gè)新數(shù)組長度的變化，如果新數(shù)組的長度大于老數(shù)組的長度，就說明timeupdata監(jiān)聽的值發(fā)生了變化，我們?cè)趯⒏柙~循環(huán)，讓newTime和lrcTime進(jìn)行比較，如果newTime大于了lrcTime，便讓ul向上一行歌詞的長度，并且給歌詞添加顏色。

這樣就實(shí)現(xiàn)的移動(dòng)端歌詞的實(shí)時(shí)滾動(dòng)。

總結(jié)

以上是生活随笔為你收集整理的vue 移动端歌词实时滚动及优化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。