当前位置: 首页 > Web前端 > HTML5

前端LRC歌词解析及播放插件

时间:2023-04-04 22:48:26 HTML5

在写音乐播放器时,前端LRC歌词解析及播放插件具有显示歌词的功能,歌词内容为lrc格式。为了显示歌词,我参考其他库,根据自己的想法,实现了一个基于javascript的lrc文件解析库。本项目是开源的,地址:https://github.com/lyswhut/lr...demo地址:https://lyswhut.github.io/lrc...安装方法本项目已经发布在npm上,所以它是可用的,可以通过npm安装或者直接导入文件来使用。安装方式一使用npm安装:npminstalllrc-file-parser-S导入://importimportLyricfrom'lrc-file-parser'安装方式二直接导入文件可以根据实际情况选择两种方式。用法varlrc=newLyric({onPlay:function(line,text){//歌词播放时的回调console.log(line,text)//line为当前播放的行//text为当前播放的歌词},onSetLyric:function(lines){//监听歌词设置事件,设置歌词时,解析完歌词后会触发此回调console.log(lines)//lines是一个数组[{time,text}],其中包含了播放时间和对应的歌词文本。},offset:150//歌词偏移时间,单位毫秒,默认150毫秒})lrc.setLyric(lyricStr)//设置歌词,这里是文本内容lrc文件//注意:设置歌词会自动暂停歌词播放lrc.play(30000)//播放歌词,传入开始播放时间,30000为播放时间,单位:mslrc.pause()//如果暂停歌词有用,请在GitHub上给个star哦~