以vue 2.0 音乐为例
安装引用
//命令行安装
npm install lyric-parser --save
//组件内引用
import Lyric from 'lyric-parser'
使用
Lyric是一个对象
<script>
...
data(){
return {
currentLyric: null // 设置一个歌词维护属性
currentLineNum：0
}
}
...
</script>
//当获得一个歌词数据如
[ti:醒来 (Live)]
[ar:薛之谦/岳云鹏]
[al:无限歌谣季 第6期]
[by:]
[offset:0]
[00:00.22]醒来 (Live) - 薛之谦 (Joker)/岳云鹏
[00:02.76]词：薛之谦/岳云鹏
[00:04.55]曲：薛之谦
[00:05.64]
[00:13.65]薛：
[00:14.42]我莫名又来了孤独感
[00:18.37]可城市分明人山车海
[00:22.24]有一片树叶在飘过来
...
let lyric = xxxx //歌词数据
this.currentLyric = new Lyric(lyric,this.handleLyric) //this.handleLyric回调函数
handleLyric({lineNum, txt}) {
this.currentLineNum = lineNum
if (lineNum > 5) {
let lineEl = this.$refs.lyricLine[lineNum - 5]
this.$refs.lyricList.scrollToElement(lineEl, 1000)// 滚动到元素
} else {
this.$refs.lyricList.scrollTo(0, 0, 1000)// 滚动到顶部
}
this.playingLyric = txt
},
