歌詞數據解析、歌詞滾動、歌詞進度控制功能的實現(基于js-base64、lyric-parser、better-scroll)

1、需求分析：

后臺歌詞接口返回的數據如下（base64字符串）：

W3RpOua8lOWRmF0KW2FyOuiWm+S5i+iwpl0KW2FsOue7heWjq10KW2J5Ol0KW29mZnNldDowXQpbMDA6MDAuNTZd5ryU5ZGYIC0g6Jab5LmL6LCmClswMDowMi40Ml3or43vvJrolpvkuYvosKYKWzAwOjAzLjk5Xeabsu+8muiWm+S5i+iwpgpbMDA6MDUuMzhd57yW5puy77ya6YOR5LyfL+W8oOWuneWuhwpbMDA6MDcuNDVd5Yi25L2c5Lq677ya6LW16Iux5L+KClswMDowOS4wOV3lkIjlo7DvvJrotbXoi7Hkv4oKWzAwOjEwLjQ4XeW9lemfs+W4iO+8mueOi+aZk+a1twpbMDA6MTEuNzRdClswMDoxMi4zNF3mt7fpn7PluIjvvJrpso3plJAKWzAwOjEzLjg4XeavjeW4puWkhOeQhuW3peeoi+W4iO+8mumyjemUkApbMDA6MTYuMTBdClswMDoyMS4yNV3nroDljZXngrkKWzAwOjIyLjIxXQpbMDA6MjUuMTZd6K+06K+d55qE5pa55byP566A5Y2V54K5ClswMDoyOC4yN10KWzAwOjMwLjIyXemAkui/m+eahOaDhee7quivt+ecgeeVpQpbMDA6MzMuNTdd5L2g5Y+I5LiN5piv5Liq5ryU5ZGYClswMDozNi4yN13liKvorr7orqHpgqPkupvmg4XoioIKWzAwOjM5LjA4XQpbMDA6NDIuMjBd5rKh5oSP6KeBClswMDo0My43NF0KWzAwOjQ2LjE3XeaIkeWPquaDs+eci+eci+S9oOaAjuS5iOWchgpbMDA6NDkuNDddClswMDo1MS43NF3kvaDpmr7ov4fnmoTlpKrooajpnaIKWzAwOjU0LjYwXeWDj+ayoeWkqei1i+eahOa8lOWRmApbMDA6NTcuMjFd6KeC5LyX5LiA55y86IO955yL6KeBClswMDo1OS42OF0KWzAxOjAyLjQ2XeivpemFjeWQiOS9oOa8lOWHuueahOaIkea8lOinhuiAjOS4jeingQpbMDE6MDcuMDJdClswMTowNy41Nl3lnKjpgLzkuIDkuKrmnIDniLHkvaDnmoTkurrljbPlhbTooajmvJQKWzAxOjEyLjE5XQpbMDE6MTIuODZd5LuA5LmI5pe25YCZ5oiR5Lus5byA5aeL5pS26LW35LqG5bqV57

解析成歌詞并應用，實現歌詞隨著播放進度滾動，顯示當前歌詞，可以對歌詞的進度進行控制（即改變歌曲進度，歌詞會進行相應調整）（圖1）

2、解決方案

使用到的庫：js-base64、lyric-parser、better-scroll，相關API建議先到github了解一下。

在dependencies中添加這兩個庫，然后npm install 一下即可，需要使用時引入。

安裝好依賴庫后：

2.1、使用js-base64對歌詞進行解析：

解析后的歌詞信息變成了可以識別的字符串，如下：（圖2）

2.2、使用lyric-parser解析歌詞字符串，使其成為能使用的數據格式：

至此，歌詞已被改成了我們需要的數據格式，如下：（圖3）

2.3、應用歌詞數據，以vue項目應用舉例：

template：

<scroll class="lyric-wrapper" ref="lyricList" :data="currentLyric && currentLyric.lines"><div><div class="lyric"><p v-for="(line,index) in currentLyric.lines" ref="lyricLine":class="{'current':currentLineNum===index}"class="text">{{line.txt}}</p></div></div></scroll>
解釋：scroll為本人之前寫的一個組件，基于better-scroll，組件詳情請看本人之前寫的博客http://blog.csdn.net/fabulous1111/article/details/78848971，組件應用于此是為了實現歌詞的滾動，給當前歌詞綁定一個current類，用于將當前播放歌詞顯示成高亮狀態。

methods：

? 使用到lyric-parser以及better-scroll，通過scrollToElement實現歌詞的自動滾動相關API建議先到github了解一下:

getLyric() {// 調用項目中獲取歌詞的api，獲取到的是使用js-base64轉了格式后的歌詞（如圖2） this.currentSong.getLyric().then((lyric) => {// 新建Lyric-parser歌詞對象this.currentLyric = new Lyric(lyric, this.handleLyric// 如果當前歌曲為播放狀態，調用歌詞對象的播放方法，播放歌詞（滾動需結合better-scroll）if (this.playing) {this.currentLyric.play()}})},handleLyric({lineNum, txt}) {this.currentLineNum = lineNum// 若當前行大于5,開始滾動,以保歌詞顯示于中間位置if (lineNum > 5) {let lineEl = this.$refs.lyricLine[lineNum - 5]// 結合better-scroll，滾動歌詞this.$refs.lyricList.scrollToElement(lineEl, 1000)} else {this.$refs.lyricList.scrollToElement(0, 0, 1000)}}

3、其他相關操作：

3.1、歌曲變化時的清空操作

3.2、單曲循環模式下的處理：

3.3、歌曲暫停/播放時，歌詞的暫停與播放

3.4、改變歌曲播放進度后，歌詞的設置

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例的全部內容，希望文章能夠幫你解決所遇到的問題。

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