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)
}
}