1. 什么是 lrc？
lrc 是一种歌词文本格式，一行歌词包含歌词内容和时间信息，格式如下：
[00:12.00]歌词内容1 [00:15.00]歌词内容2
2. lrc 包介绍
lrc 是一个 npm 包，用来解析和处理 lrc 格式的歌词。使用 lrc 包可以方便地读取歌词文件，获取歌词内容和时间信息，并提供歌词动态滚动等功能。
3. lrc 的安装
在终端中执行以下命令安装 lrc 包：
npm install lrc
4. lrc 的使用方法
4.1. 读取 lrc 文件
首先，我们需要读取 lrc 文件。lrc 包提供了两种读取方法：通过文件路径和通过文件内容。
4.1.1. 通过文件路径读取
通过文件路径读取 lrc 文件，需要使用 lrc-file-parser 模块，示例代码如下：
-- -------------------- ---- -------
----- ------------- - ---------------------------
----- --------- - --- ----------------
----- ----------- - -------------
--------------------------------
------------ -- -
------------------
--
-------------- -- -
---------------------
---在这个示例代码中，我们通过 LrcFileParser 实例的 parseFile 方法读取了 ./test.lrc 文件，并输出了读取到的数据。
4.1.2. 通过文件内容读取
通过文件内容读取 lrc 文件，直接使用 lrc 模块的 parse 方法即可，示例代码如下：
const { parse } = require('lrc');
const lrcContent = `
[00:12.00]歌词内容1
[00:15.00]歌词内容2
`;
const lrcData = parse(lrcContent);
console.log(lrcData);在这个示例代码中，我们定义了一个字符串 lrcContent，并使用 parse 方法解析了这个字符串，并输出了解析到的数据。
4.2. 处理 lrc 数据
读取 lrc 文件后，我们需要对其中的数据进行处理。lrc 包提供了 Lyrics 类来处理 lrc 数据。示例代码如下：
const { Lyrics } = require('lrc');
const lrcContent = `
[00:12.00]歌词内容1
[00:15.00]歌词内容2
`;
const lrcData = new Lyrics(lrcContent);
console.log(lrcData);在这个示例代码中，我们通过 Lyrics 类实例化了一个 lrc 数据对象，以便后续的操作。
4.3. lrc 数据操作
在完成了 lrc 数据的处理后，我们可以针对 lrc 数据进行各种操作，例如获取歌词内容、获取时间信息等。这里只列举一些常用的操作，更多的操作可以查看官方文档。
4.3.1. 获取歌词内容和对应时间
const { Lyrics } = require('lrc');
const lrcContent = `
[00:12.00]歌词内容1
[00:15.00]歌词内容2
`;
const lrcData = new Lyrics(lrcContent);
const lyrics = lrcData.getLyrics();
console.log(lyrics);在这个示例代码中，我们通过 getLyrics 方法获取了歌词内容和对应时间信息，并输出了获取到的数据。
4.3.2. 获取指定时间对应的歌词内容
-- -------------------- ---- ------- ----- - ------ - - --------------- ----- ---------- - - --------------- --------------- -- ----- ------- - --- ------------------- ----- ---- - ------ -- -------- ----- ----- - ----------------------- -------------------
在这个示例代码中，我们通过 getLyric 方法获取了指定时间对应的歌词内容，并输出了获取到的数据。
4.4. lrc 动态滚动
lrc 包还提供了动态滚动功能，可以方便地实现歌词的显示和滚动效果。示例代码如下：
HTML:
<div id="lyric"></div>
JavaScript:
-- -------------------- ---- -------
----- - ------ - - ---------------
----- ---------- - -
---------------
---------------
--
----- ------- - --- -------------------
----- ------------ - ---------------------------------
------------------ ------ -- -
---------------------- - -----
---
---------------在这个示例代码中，我们通过监听 Lyrics 实例的 line 事件，实现了歌词的动态滚动效果。
5. 总结
lrc 包是一个处理 lrc 歌词格式的 npm 包，使用简单方便，可以方便地读取、处理和动态滚动 lrc 格式的歌词。通过阅读本文，您应该可以更好地使用 lrc 包，并能够实现自己的歌词滚动模块。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaefcb5cbfe1ea0610f5a