歌詞數(shù)據(jù)解析、歌詞滾動(dòng)、歌詞進(jìn)度控制功能的實(shí)現(xiàn)(基于js-base64、lyric-parser、better-scroll)

1、需求分析：

后臺(tái)歌詞接口返回的數(shù)據(jù)如下（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

解析成歌詞并應(yīng)用，實(shí)現(xiàn)歌詞隨著播放進(jìn)度滾動(dòng)，顯示當(dāng)前歌詞，可以對(duì)歌詞的進(jìn)度進(jìn)行控制（即改變歌曲進(jìn)度，歌詞會(huì)進(jìn)行相應(yīng)調(diào)整）（圖1）

2、解決方案

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

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

安裝好依賴庫后：

2.1、使用js-base64對(duì)歌詞進(jìn)行解析：

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

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

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

2.3、應(yīng)用歌詞數(shù)據(jù)，以vue項(xiàng)目應(yīng)用舉例：

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為本人之前寫的一個(gè)組件，基于better-scroll，組件詳情請(qǐng)看本人之前寫的博客http://blog.csdn.net/fabulous1111/article/details/78848971，組件應(yīng)用于此是為了實(shí)現(xiàn)歌詞的滾動(dòng)，給當(dāng)前歌詞綁定一個(gè)current類，用于將當(dāng)前播放歌詞顯示成高亮狀態(tài)。

methods：

? 使用到lyric-parser以及better-scroll，通過scrollToElement實(shí)現(xiàn)歌詞的自動(dòng)滾動(dòng)相關(guān)API建議先到github了解一下:

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

3、其他相關(guān)操作：

3.1、歌曲變化時(shí)的清空操作

3.2、單曲循環(huán)模式下的處理：

3.3、歌曲暫停/播放時(shí)，歌詞的暫停與播放

3.4、改變歌曲播放進(jìn)度后，歌詞的設(shè)置

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

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