马黑黑老师原生LRC歌词独立版之简单同步和亮色同步模块说明

醉美水芙蓉

处理原生歌词同步功能此前已经提供了一系列的小插件，其中可能包含有独立LRC歌词版的插件或实现方案，遗憾的是这些插件在 Discuz! 论坛使用起来略显复杂，所以新写了三个独立LRC歌词同步的ES模块，方便在各类环境中使用。

一、简单模块 lrc-only.js

该模块仅简单同步歌词，没有同步的亮色修饰。使用者自行设置 #lrc CSS选择器并提供 id="lrc" 的 div HTML标签。以下是结构性应用举例：

<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{...} 是设置高亮逐字同步的关键，如果不想使用模块设置的 background 渐变颜色，可以加上此伪元素选择器加以更改，支持纯色、渐变色甚至图片。

下面是模块的简单示例：

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

应用实例请参阅：世间美好和你环环相扣

klxf

颇实用的教程，谢谢醉美管理员经典分享