以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
},