原生LRC歌词独立版之简单同步和亮色同步模块说明
处理原生歌词同步功能此前已经提供了一系列的小插件，其中可能包含有独立LRC歌词版的插件或实现方案，遗憾的是这些插件在 Discuz! 论坛使用起来略显复杂，所以新写了三个独立LRC歌词同步的ES模块，方便在各类环境中使用。
一、简单模块 lrc-only.js
该模块仅简单同步歌词，没有同步的亮色修饰。使用者自行设置
<style>
/* ...其它CSS代码 */
/* 设置 lrc 歌词标签样式 */
#lrc { position: absolute; bottom: 20px; color: cyan; font-size: 30px; font-weight: bold; text-shadow: 1px 1px 2px #333; opacity: .9; }
</style>
<div id="pa">
<!-- ...其它HTML标签 -->
<!-- lrc歌词标签必须有 -->
<div id="lrc">HUACHAO LRC</div>
</div>
<script type="module" >
// 导入模块(lrc 名称可自定义)
import lrc from 'https://638183.freep.cn/638183/web/lrc/lrc_only.js';
//歌词（分行写，也可使用分行符写在一行）
var geci = `
[00:01:000]Minnutes - I Can
[00:11.260]I can do anything
[00:14.820]I can do anything today
[00:17.950]I can do anything
/* 更多歌词行 */
`;
// 函数 lrc 和前面导入模块定义的名称相一致
// pa 对应 id="pa" 的帖子id, geci 对应上面的歌词变量
lrc(pa, geci);
</script>
完整的帖子代码示例可参阅：I Can（lrc_only模块演示）
二、歌词逐字亮色同步模块 yslrc-only.js
该模块功能更为丰富——
参数:
@param pa : 宿主元素 (必选)
@param lrcText : 原生歌词 (必选)
@param skip : 同步微调系数 (可选)
@param average : 歌句用时均摊系数 (可选)
前台css设置:
#lrc { 定位、修改前景色、字号等，可选 }
#lrc::before { 主要设置同步颜色，可选 }
前台HTML:
<div id="lrc" data-lrc="HC">HC</div> (可选)
参数3、4可选，它们主要用于处理歌词总体时间偏移、各句歌词演唱用时均摊等微调功能，不需要时不用理睬，直接lrc(pa, geci)完事。另外，CSS选择器#lrc{...}应该设置，至少得使用 left、top 或 right、bottom 做好定位，还可以设置字号、前景色等，#lrc 的伪元素 ::before{...} 是设置高亮逐字同步的关键，如果不想使用模块设置的
下面是模块的简单示例：
<style>
// 其它CSS选择器代码
// 定位LRC歌词容器、设置前景色
#lrc { left: 20px; bottom: 20px; color: gray; }
// 如果需要可以设置伪元素的歌词同步颜色，否则无需下一行代码
#lrc::before { background: linear-gradient(90deg, red, skyblue); }
</style>
<div id="pa">
<!-- 其它标签代码 -->
<!-- 下面的LRC歌词容器可有可无 -->
<div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
</div>
<script type="module">
// 导入模块（lrc 可自定义）
import lrc from 'https://638183.freep.cn/638183/web/lrc/yslrc-only.js';
// 创建歌词变量
var geci = `
[00:01:000]Minnutes - I Can
[00:11.260]I can do anything
[00:14.820]I can do anything today
[00:17.950]I can do anything
/* 其它歌词 */
`;
// 启用同步函数（函数名 lrc 与前面导入保持一致）
lrc (pa, geci);
</script>
查看实例请访问：I Can（原生独立歌词亮色同步版）
三、歌词逐字亮色同步模块之花朝版 hclrc-only.js
花朝格式的LRC歌词同步需要单独制作歌词数组，制作工具：花潮LRC在线，可以将之存为本地 .html 文档运行（建议）。模块函数仅两个参数：帖子容器、歌词数组变量。下面是应用示例：
<style>
/* ... 其它CSS代码 */
#lrc { left: 20px; bottom: 20px; } /* 定位 */
</style>
<div id="pa">
<!-- 下面的 LRC 容器可有可无 -->
<div id="lrc" class="HUACHAO LRC">HUACHAO LRC</div>
</div>
<script type="module">
// 导入的函数名可自定义名称
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci = [
[0.25,"歌词1",16.1],
[1.56,"歌词2,5.2],
[20.9,"歌词3",3.2],
[24.1,"。。。",5.6],
[28.05,"歌词N",3.0]
];
// 运行歌词同步函数 ：函数名称和前面导入的必须一致
lrc (pa, geci);
</script>
应用实例请参阅：世间美好和你环环相扣
前一篇: lnum ：代码加行号的极简模块
下一篇: 自适应容器尺寸svg粒子路径动画+全屏模块
发表评论:
评论列表 [1条]
#1 | 小希 于 2025-8-15 10:02 发布: 三个模块都重新写过的，辛苦
