播放器歌词数据解析

1.引入js-base64对歌词数据进行解码

修改class Song类中的getLyric方法

this.lyric = Base64.decode(res.lyric)

Song类中的getLyric方法返回Promise对象实例

2.使用lyric-parser对歌词进行解析

在player.vue中实现getLyric方法，得到经过lyric-parser解析之后的歌词。此方法调用Song类中的getLyric方法，得到返回的Promise对象实例。

getLyric() {

        this.currentSong.getLyric().then((lyric) => {

                // 经过Lyric处理之后的currentLyric有属性lines

               // lines[i] 有属性time和txt,time是时间，txt是当前句子歌词

               this.currentLyric = new Lyric(lyric, this.handleLyric)

               if (this.playing) {

                    this.currentLyric.play()

              }

         }).catch(() => {

         })

}

调用this.currentLyric.play()方法时，进行歌词播放，引起Lyric实例对象（这里是this.currentLyric）的lineNum改变。当lineNum改变时，触发回调函数this.handleLyric。

在回调函数中，我们需要得到当前播放的歌词行数（this.currentLineNum），并且实现歌词面板的滚动（使用Scroll组件实现滚动），使当前播放的歌词始终在屏幕中间位置。

handleLyric({lineNum, txt}) {

       // 当lineNum发生改变时，触发handleLyric

      this.currentLineNum = lineNum

      if (lineNum > 5) {

            let lineEl = this.$refs.lyricLine[lineNum - 5]

           this.$refs.lyricList.scrollToElement(lineEl, 1000)

     } else {

           this.$refs.lyricList.scrollToElement(0, 0, 1000)

    }

}