在做移動端酷我音樂的時候，發現歌詞隨著音樂滾動是一個小難點，說難也不難，但是說簡單的話也不簡單。大家請求歌詞返回的類型可能不太一樣，但是判斷邏輯都是一樣的。

左邊是我的歌曲詳情頁面，右邊的是我的歌詞請求數據的形式，時間和歌詞是一一對應的。

先盤下讓歌詞實時滾動的邏輯：

（下文為了便于區分兩個時間參數，用newTime來表示實時獲取的歌詞時間，lrcTime表示請求數據中歌詞的時間）

1、獲取當前歌詞播放的時間

2、讓newTime與lrcTime相比較，當newTime>lrcTime時，讓lrcTime的歌詞展示在展示區域中

先來說說第一個，調用audio自帶的方法：timeupdate來實時獲取歌詞

this.$refs.lrc是獲取audio的標簽?

dom操作：在audio標簽中添加 ref=”自定義名字“，js中用“this.$refs.自定義名字”? 進行獲取當前的dom節點

使用audio便簽的方法timeupdate來獲取當前newTime

第二個

讓歌詞如何實時滾動，就上唱完的歌詞往上走，未唱的歌詞往上頂。

給渲染歌詞列表的ul添加一個相對定位，給每一行歌詞設置一個高度，當這一句歌詞唱完之后，ul整體向上平移一行歌詞的高度，這樣就實現的歌詞的滾動

用過? timeupdate? 這個方法的都知道，它會一直進行返回歌曲時間，一秒之內返回4次往上，顯然這個值用來執行for循環比較，因為這樣的話，會在一秒之內執行4次循環，對瀏覽器的負擔很大。

將它返回的所有值放到一個新的數組中，將重復的數值去掉，然后用watch方法來監聽這個新數組長度的變化，如果新數組的長度大于老數組的長度，就說明timeupdata監聽的值發生了變化，我們在將歌詞循環，讓newTime和lrcTime進行比較，如果newTime大于了lrcTime，便讓ul向上一行歌詞的長度，并且給歌詞添加顏色。

這樣就實現的移動端歌詞的實時滾動。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。