简介
lc-lyric-parser 是一个 JavaScript 的 npm 包，用于解析歌词文本并返回歌词列表。使用 lc-lyric-parser 可以轻松地处理歌词相关的问题，例如歌词滚动、歌词高亮等功能。
本篇文章将详细介绍 npm 包 lc-lyric-parser 的使用教程，包括安装、引入、使用方法和示例。
安装
lc-lyric-parser 可以通过 npm 进行安装，使用以下命令来进行安装：
npm install lc-lyric-parser
引入
在需要使用 lc-lyric-parser 的 JavaScript 文件中，通过 require 或 import 的方式进行引入。
const LyricParser = require('lc-lyric-parser')
// or
import LyricParser from 'lc-lyric-parser'使用
创建实例
在使用 lc-lyric-parser 解析歌词前，需要创建 LyricParser 的实例。
const lyricParser = new LyricParser()
解析歌词文本
使用 lyricParser.parse 方法可以解析歌词文本，并返回一个包含歌词列表的对象。以下是一个基本的示例：
-- -------------------- ---- ------- ----- ------- - - -------- -------- -------- ---------- ------------- - --- --------------- --------------- -------------- -------------- --------------- ---------------- -------------- --------------- -------------- ------------------- -------------- ------------------ ------------------- -------------- ------------- ----------------- ------------- ---------------- --------------- ----------------- ----------------- --------------- ----------------- -------------------- - ----- ----- - -------------------------- ------------------ -- ------- -- - -- ----- - -- --- ------ -- --- ------ -- --- ------ -- --- ------- -- -- -- ------- - -- - ----- -- ----- ------ -- -- - ----- ----- ----- ------ -- -- - ----- ----- ----- ------- -- -- - ----- ----- ----- -------- -- -- - ----- ----- ----- ------ -- -- - ----- ----- ----- ------- -- -- - ----- ----- ----- ------ -- -- - ----- ------ ----- ----------- -- -- - ----- ------ ----- ------ -- -- - ----- ------ ----- ---------- -- -- - ----- ------ ----- ----------- -- -- - ----- ------ ----- ------ -- -- - ----- ------ ----- ----- -- -- - ----- ------ ----- --------- -- -- - ----- ------ ----- ----- -- -- - ----- ------ ----- -------- -- -- - ----- ------ ----- ------- -- -- - ----- ------ ----- --------- -- -- - ----- ------ ----- --------- -- -- - ----- ------ ----- ------- -- -- - ----- ------ ----- --------- -- -- - ----- ------ ----- ------------ - -- - -- -
处理歌词滚动
使用 lyricParser.getCurrentLyricIndex 方法可以获取当前播放时间对应的歌词行索引。然后可以根据歌词行索引，处理歌词滚动的逻辑。
以下是一个基本的示例：
-- -------------------- ---- -------
----- ------- - -
--------
--------
--------
----------
------------- - ---
---------------
---------------
--------------
--------------
---------------
----------------
--------------
---------------
--------------
-------------------
--------------
------------------
-------------------
--------------
-------------
-----------------
-------------
----------------
---------------
-----------------
-----------------
---------------
-----------------
--------------------
-
----- ----- - --------------------------
----- ------------ - -------------------------------
---------------- - ----------------
-------- ------------------ -
----- ----------- - ----------------------------------- - -----
----- ----------------- - ---------------------------------------------
-- ------------
----- ----------- - ---------------------------------
-- ------------- -
--------------------------------------
-
----- ------------ - -----------------------------------
-- ------------- -- ------------------- - ------------------ -
----- ------ - -------------------------------
------------------------------
-
-
------------------------------------------- -----------------
-------------------处理歌词高亮
使用 lyricParser.getLyricBytime 方法可以获取当前播放时间对应的歌词行文本。然后可以根据歌词行文本，处理歌词高亮的逻辑。
以下是一个基本的示例：
-- -------------------- ---- -------
----- ------- - -
--------
--------
--------
----------
------------- - ---
---------------
---------------
--------------
--------------
---------------
----------------
--------------
---------------
--------------
-------------------
--------------
------------------
-------------------
--------------
-------------
-----------------
-------------
----------------
---------------
-----------------
-----------------
---------------
-----------------
--------------------
-
----- ----- - --------------------------
----- ------------ - -------------------------------
---------------- - ----------------
-------- ------------------ -
----- ----------- - ----------------------------------- - -----
----- ------ - ------------
----- ------------ - --------------------------------------- -------
-- ------------
----- ----------- - ---------------------------------
-- ------------- -
--------------------------------------
-
----- --------- - ------------ - ----------------- - --
----- ------------ - -----------------------------------
--- ---- - - -- - - -------------------- ---- -
----- ------- - ---------------
-- ------------------ --- ---------- -
-------------------------------
-----
-
-
-
------------------------------------------- -----------------
-------------------示例代码
以下是一个完整的示例代码，包含了歌词滚动和歌词高亮功能的实现：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- ---------------------------- ----------------- --
----- --------------- ---------------------------- ------------------ --
--------- ----- ------ ------------
-------
------ -
-------------- ----
----------- -------
------ -----
-
------- -
------ -----
------------ -----
-
--------
-------
------
---- ---------------
-- ----------------------
-- ----------------------
-- -----------------------
-- ------------------------
-- ----------------------
-- -----------------------
-- ----------------------
-- ---------------------------
-- ----------------------
-- --------------------------
-- ---------------------------
-- ----------------------
-- ---------------------
-- -------------------------
-- ---------------------
-- ------------------------
-- -----------------------
-- -------------------------
-- -------------------------
-- -----------------------
-- -------------------------
-- ----------------------------
------
------- --------------------------
-------
--------- -------------------- ---- -------
------ ----------- ---- -----------------
----- ------- - -
--------
--------
--------
----------
------------- - ---
---------------
---------------
--------------
--------------
---------------
----------------
--------------
---------------
--------------
-------------------
--------------
------------------
-------------------
--------------
-------------
-----------------
-------------
----------------
---------------
-----------------
-----------------
---------------
-----------------
--------------------
-
----- ----- - --- ----------------------------
----- ------------ - -------------------------------
---------------- - ----------------
-------- ------------------ -
----- ----------- - ----------------------------------- - -----
----- ----------------- - ---------------------------------------------
----- ------------ - ---------------------------------------
-- ------------
----- ----------- - ---------------------------------
-- ------------- -
--------------------------------------
-
----- ------------ - -----------------------------------
-- ------------- -- ------------------- - ---------
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------