vue-music：歌词获取并解析为json
1. 配置接口
2. 调取接口的API
在api文件夹下创建song.js
3.在Song类中调用
为什么写在class Song{}中：因为这样可以它的实例直接调用自己的歌词
export default class Song {
....
//当初没有搞懂为什么lyric不再constructor中定义：下面的if判断，防止重复请求歌词
getLyric() {
if (this.lyric) {
return Promise.resolve(this.lyric)
}
//这里用Promsie返回，同样的道理：后面调用这个方法，方便进一步操作数据，同2中的promsie
return new Promise((resolve, reject) => {
getLyric(this.mid).then((res) => {
if (res.code === ERR_OK) {
//返回数据的是 base64 的字符串，需要解码，这里用到了第三方库: js-base64
this.lyric = Base64.decode(res.lyric)
resolve(this.lyric)
} else {
reject(new Error(no lyric))
}
})
})
}
}
3.真正调取方法
在player.vue中methods,调取方法
getLyric() {
//在2中，方法定义在class Song{}类中，这个时候this.currentSong是类的实例，可以直接调用定义的实例方法
this.currentSong.getLyric().then((lyric) => {
//利用第三方库: js-lyric ，解析我们的歌词，生成方便操作的对象
//new Lyric生成的实例,还有一些api方便使用play、stop等等
//this.handleLyric回调函数handleLyric(lineNum,txt):(当前播放的行数，当前播放的文字)
this.currentLyric = new Lyric(lyric, this.handleLyric)
if (this.playing) {
this.currentLyric.play()
}
}).catch(() => {
//如果歌词有问题，初始化
this.currentLyric = null
this.playingLyric =
this.currentLineNum = 0
})
},
