前端LRC歌词解析播放插件

monw3c 发布于2019-08-02 16:11 / 2775人阅读

摘要：前端歌词解析播放插件写音乐播放器的时候，做了显示歌词的功能，而歌词内容为格式。为了显示歌词，就参考其他库根据自己的想法实现了一个基于的文件解析库。使用方法歌词播放时的回调是当前播放行是当前播放的歌词监听歌词设置事件。

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

直接引入文件的方式

两种方法根据实际情况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://www.ucloud.cn/yun/54831.html

前端LRC歌词解析播放插件

摘要：前端歌词解析播放插件写音乐播放器的时候，做了显示歌词的功能，而歌词内容为格式。为了显示歌词，就参考其他库根据自己的想法实现了一个基于的文件解析库。使用方法歌词播放时的回调是当前播放行是当前播放的歌词监听歌词设置事件。前端LRC歌词解析播放插件写音乐播放器的时候，做了显示歌词的功能，而歌词内容为lrc格式。为了显示歌词，就参考其他库根据自己的想法实现了一个基于JavaScript的l...

shiguibiao 2019-08-23 16:47 评论0 收藏0
lrc滚动歌词解析及显示

摘要：以为扩展名的歌词文件可以在各类数码播放器中同步显示。这是用于总体调整显示快慢的，但多数的可能不会支持这种标签。如何实现歌词的解析解析思路如下根据字符串，通过换行符分成数组的每一项。相应的正则表达式以为例，统一解析成以秒为单位的秒。 lrc歌词格式是什么样的？ lrc是英文lyric（歌词）的缩写，被用做歌词文件的扩展名。以lrc为扩展名的歌词文件可以在各类数码播放器中同步显示。LRC...

android_c 2019-08-21 10:39 评论0 收藏0
用 TS + Vue 重写 APlayer HTML5 音乐播放器

摘要：简介是一款简洁漂亮的音乐播放器在我第一次看到这款播放器颜值的时候让我眼前一亮，我非常崇拜那些能设计出好看界面的设计师但是在用过之后发现还是有不足的地方这是我曾经提过的用了一段时间，很喜欢简洁的，提一些其他可改进的建议我认为有必要提供动态管理简介 @DIYgod/APlayer 是一款简洁漂亮的 HTML5 音乐播放器 (〃ﾉωﾉ) 在我第一次看到这款播放器颜值的时候让我眼前一亮，我...

BingqiChen 2019-08-20 18:15 评论0 收藏0