前端LRC歌词解析播放插件

42次阅读

共计 780 个字符,预计需要花费 2 分钟才能阅读完成。

前端 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 哦~

正文完
 0