歌詞數據解析、歌詞滾動、歌詞進度控制功能的實現(基於js-base64、lyric-parser、better-scroll)，以vue項目為例

 

 

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

1、需求分析

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

W3RpOua8lOWRmF0KW2FyOuiWm+S5i+iwpl0KW2FsOue7heWjq10KW2J5Ol0KW29mZnNldD  
owXQpbMDA6MDAuNTZd5ryU5ZGYIC0g6Jab5LmL6LCmClswMDowMi40Ml3or43vvJrolpvk  
uYvosKYKWzAwOjAzLjk5Xeabsu+8muiWm+S5i+iwpgpbMDA6MDUuMzhd57yW5puy77ya6Y  
OR5LyfL+W8oOWuneWuhwpbMDA6MDcuNDVd5Yi25L2c5Lq677ya6LW16Iux5L+KClswMDow  
OS4wOV3lkIjlo7DvvJrotbXoi7Hkv4oKWzAwOjEwLjQ4XeW9lemfs+W4iO+8mueOi+aZk+  
a1twpbMDA6MTEuNzRdClswMDoxMi4zNF3mt7fpn7PluIjvvJrpso3plJAKWzAwOjEzLjg4X  
eavjeW4puWkhOeQhuW3peeoi+W4iO+8mumyjemUkApbMDA6MTYuMTBdClswMDoyMS4yNV3n  
roDljZXngrkKWzAwOjIyLjIxXQpbMDA6MjUuMTZd6K+06K+d55qE5pa55byP566A5Y2V54K  
5ClswMDoyOC4yN10KWzAwOjMwLjIyXemAkui/m+eahOaDhee7quivt+ecgeeVpQpbMDA6Mz  
MuNTdd5L2g5Y+I5LiN5piv5Liq5ryU5ZGYClswMDozNi4yN13liKvorr7orqHpgqPkupvmg  
4XoioIKWzAwOjM5LjA4XQpbMDA6NDIuMjBd5rKh5oSP6KeBClswMDo0My43NF0KWzAwOjQ2  
LjE3XeaIkeWPquaDs+eci+eci+S9oOaAjuS5iOWchgpbMDA6NDkuNDddClswMDo1MS43NF3  
kvaDpmr7ov4fnmoTlpKrooajpnaIKWzAwOjU0LjYwXeWDj+ayoeWkqei1i+eahOa8lOWRmA  
pbMDA6NTcuMjFd6KeC5LyX5LiA55y86IO955yL6KeBClswMDo1OS42OF0KWzAxOjAyLjQ2X  
eivpemFjeWQiOS9oOa8lOWHuueahOaIkea8lOinhuiAjOS4jeingQpbMDE6MDcuMDJdClsw  
MTowNy41Nl3lnKjpgLzkuIDkuKrmnIDniLHkvaDnmoTkurrljbPlhbTooajmvJQKWzAxOjE  
yLjE5XQpbMDE6MTIuODZd5LuA5LmI5pe25YCZ5oiR5Lus5byA5aeL5pS26LW35LqG5bqV57 

解析成歌詞並應用，實現歌詞隨着播放進度滾動，顯示當前歌詞，可以對歌詞的進度進行控制（即改變歌曲進度，歌詞會進行相應調整）（圖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、改變歌曲播放進度后，歌詞的設置