lyric-parser 歌词插件
作者：
秒速五厘米
文章简介：
lyric-parser 歌词插件
以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.handleLyric回调函数
this.currentLyric = new Lyric(lyric,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
},API
//播放歌词 play() //暂停歌词 stop() //歌词跳转 seek(startTime) //切换播放/暂停状态 toggelePlay()
https://api.mlwei.com/ (公共接口)