前端LRC歌词剖析播放插件
写音乐播放器的时刻,做了显现歌词的功用,而歌词内容为lrc花样。为了显现歌词,就参考其他库依据本身的主意完成了一个基于JavaScript的lrc文件剖析库。
本项目已开源,地点:https://github.com/lyswhut/lr…
demo地点:https://lyswhut.github.io/lrc…
装置要领
本项目已宣布到 npm
上,所以可用 npm
装置或许直接引入文件的体式格局运用。
装置要领1
运用 npm
装置:
npm install lrc-file-parser -S
导入:
// import
import Lyric from 'lrc-file-parser'
装置要领2
直接引入文件的体式格局
<script src="./lrc-file-parser.min.js"></script>
两种要领依据实际情况2选1即可。
运用要领
var lrc = new Lyric({
onPlay: function (line, text) { // 歌词播放时的回调
console.log(line, text) // line 是当前播放行
// text 是当前播放的歌词
},
onSetLyric: function (lines) { // 监听歌词设置事宜。当设置歌词时,歌词剖析终了会触发此回调。
console.log(lines) // lines 是一个数组[{time,text}],内里包括播放时候及对应的歌词文本。
},
offset: 150 // 歌词偏移时候单元毫秒, 默许 150 ms
})
lrc.setLyric(lyricStr) // 设置歌词,此处传入lrc文件的文本内容
// 注重:设置歌词将自动停息歌词播放
lrc.play(30000) // 播放歌词,传入最先播放时候,30000是播放时候,单元:ms
lrc.pause() // 停息播放歌词
好用的话请在GitHub给个star哦~