基于前端的LRC歌词文件解析插件

目录

  • 基于前端的LRC歌词文件解析插件
    • 安装方法
      • 安装方法1
      • 安装方法2
    • 使用方法

基于前端的LRC歌词文件解析插件

写音乐播放器的时候,做了显示歌词的功能,而歌词内容为lrc格式。为了显示歌词,就参考其他库根据自己的想法实现了一个基于JavaScript的lrc文件解析库。
本项目已开源,地址:https://github.com/lyswhut/lrc-file-parser
demo地址:https://lyswhut.github.io/lrc-file-parser/dist/index.html

安装方法

本项目已发布到 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 // 歌词偏移时间单位毫秒, 默认 190 ms
})

lrc.setLyric(lyricStr) // 设置歌词,此处传入lrc文件的文本内容
                      // 注意:设置歌词将自动暂停歌词播放
lrc.play(30000) // 播放歌词,传入开始播放时间,30000是播放时间,单位:ms
lrc.pause() // 暂停播放歌词

好用的话请在GitHub给个star哦~

你可能感兴趣的:(前端)