前端LRC歌词剖析播放插件

2024年4月20日 160次阅读 来源: 落雪无痕

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

    原文作者：落雪无痕
    原文地址: https://segmentfault.com/a/1190000018789057
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞