原生LRC歌词独立版之简单同步和亮色同步模块说明
本帖最后由 马黑黑 于 2025-8-13 19:38 编辑 <br /><br /><style>.artBox { font-size: 18px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
.artBox h5 { font-size: 18px; margin: 6px 0; }
</style>
<div id="prevBox"></div>
<div class="artBox">
<p>处理原生歌词同步功能此前已经提供了一系列的小插件，其中可能包含有独立LRC歌词版的插件或实现方案，遗憾的是这些插件在 Discuz! 论坛使用起来略显复杂，所以新写了三个独立LRC歌词同步的ES模块，方便在各类环境中使用。</p>
<h5>一、简单模块 lrc-only.js</h5>
<p>该模块仅简单同步歌词，没有同步的亮色修饰。使用者自行设置 <txt-red>#lrc</txt-red> CSS选择器并提供 <txt-red>id="lrc"</txt-red> 的 <txt-darkred>div</txt-darkred> HTML标签。以下是结构性应用举例：</p>
<div class="codebox">
<style>
<txt-green>/* ...其它CSS代码 */</txt-green>
<txt-green>/* 设置 lrc 歌词标签样式 */</txt-green>
#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">
<txt-green><!-- ...其它HTML标签 --></txt-green>
<txt-green><!-- lrc歌词标签必须有 --></txt-green>
<div id="lrc">HUACHAO LRC</div>
</div>
<script <txt-blue>type="module"</txt-blue>>
<txt-green>// 导入模块(<txt-red>lrc</txt-red>名称可自定义)</txt-green>
import <txt-red>lrc</txt-red> from 'https://638183.freep.cn/638183/web/lrc/lrc_only.js';
<txt-green>//歌词（分行写，也可使用分行符写在一行）</txt-green>
var geci = `
Minnutes - I Can
I can do anything
I can do anything today
I can do anything
<txt-green>/* 更多歌词行 */</txt-green>
`;
<txt-green>// 函数 lrc 和前面导入模块定义的名称相一致</txt-green>
<txt-green>// pa 对应 id="pa" 的帖子id, geci 对应上面的歌词变量</txt-green>
<lrc-red>lrc</txt-red>(pa, geci);
</script>
</div>
<p>完整的帖子代码示例可参阅：<a href="http://mhh.52qingyin.cn/art/bshow.php?st=4&sd=4&art=mahei_1754912774" target="_blank">I Can（lrc_only模块演示）</a></p>
<h5>二、歌词逐字亮色同步模块 yslrc-only.js</h5>
<p>该模块功能更为丰富——</p>
<div class="codebox" data-title="模块说明：">
参数:
@param pa : 宿主元素 (必选)
@param lrcText : 原生歌词 (必选)
@param skip : 同步微调系数 (可选)
@param average : 歌句用时均摊系数 (可选)
前台css设置:
#lrc { 定位、修改前景色、字号等，可选 }
#lrc::before { 主要设置同步颜色，可选 }
前台HTML:
<div id="lrc" data-lrc="HC">HC</div> (可选)
</div>
<p>参数3、4可选，它们主要用于处理歌词总体时间偏移、各句歌词演唱用时均摊等微调功能，不需要时不用理睬，直接<mark>lrc(pa, geci)</mark>完事。另外，CSS选择器<mark>#lrc{...}</mark>应该设置，至少得使用 left、top 或 right、bottom 做好定位，还可以设置字号、前景色等，#lrc 的伪元素 ::before{...} 是设置高亮逐字同步的关键，如果不想使用模块设置的 <txt-red>background</txt-red> 渐变颜色，可以加上此伪元素选择器加以更改，支持纯色、渐变色甚至图片。</p>
<p>下面是模块的简单示例：</p>
<div class="codebox">
<style>
<txt-green>// 其它CSS选择器代码</txt-green>
<txt-green>// 定位LRC歌词容器、设置前景色</txt-green>
#lrc { left: 20px; bottom: 20px; color: gray; }
<txt-green>// 如果需要可以设置伪元素的歌词同步颜色，否则无需下一行代码</txt-green>
#lrc::before { background: linear-gradient(90deg, red, skyblue); }
</style>
<div id="pa">
<txt-green><!-- 其它标签代码 --></txt-green>
<txt-green><!-- 下面的LRC歌词容器可有可无 --></txt-green>
<div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
</div>
<script type="module">
<txt-green>// 导入模块（<txt-red>lrc</txt-red> 可自定义）</txt-green>
import <txt-red>lrc</txt-red> from 'https://638183.freep.cn/638183/web/lrc/yslrc-only.js';
<txt-green>// 创建歌词变量</txt-green>
var geci = `
Minnutes - I Can
I can do anything
I can do anything today
I can do anything
<txt-green>/* 其它歌词 */</txt-green>
`;
<txt-green>// 启用同步函数（函数名 lrc 与前面导入保持一致）</txt-green>
<txt-red>lrc</txt-red>(pa, geci);
</script>
</div>
<p>查看实例请访问：<a href="http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1754956059" target="_blank">I Can（原生独立歌词亮色同步版）</a></p>
<h5>三、歌词逐字亮色同步模块之<txt-red>花朝版</txt-red> hclrc-only.js</h5>
<p>花朝格式的LRC歌词同步需要单独制作歌词数组，制作工具：<a href="http://mhh.52qingyin.cn/api/pencilcode/lrc2ar.htm" target="_blank">花潮LRC在线</a>，可以将之存为本地 .html 文档运行（建议）。模块函数仅两个参数：帖子容器、歌词数组变量。下面是应用示例：</p>
<div class="codebox">
<style>
<txt-green>/* ... 其它CSS代码 */</txt-green>
#lrc { left: 20px; bottom: 20px; } <txt-green>/* 定位 */</txt-green>
</style>
<div id="pa">
<txt-green><!-- 下面的 LRC 容器可有可无 --></txt-green>
<div id="lrc" class="HUACHAO LRC">HUACHAO LRC</div>
</div>
<script type="module">
<txt-green>// 导入的函数名可自定义名称</txt-green>
import <txt-red>lrc</txt-red> from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci = [
,
,
,
,
];
<txt-green>// 运行歌词同步函数 ：函数名称和前面导入的必须一致</txt-green>
<txt-red>lrc</txt-red>(pa, geci);
</script>
</div>
<p>应用实例请参阅：<a href="http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1755058574" target="_blank">世间美好和你环环相扣</a></p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 辛苦了！谢谢马老师经典讲授与精彩示范{:4_191:} 杨帆 发表于 2025-8-12 16:58
辛苦了！谢谢马老师经典讲授与精彩示范
{:4_190:} 原生歌词配置说明也有了，这加歌词好方便。。
简洁版的节省时间，高亮的设置更细致一些，可以有多种选择。。{:4_173:} 高亮色是经典配色，熟悉又好看 逐字亮色同步歌词也用的原生歌词，这样可以么，如果有较长时间的过度音乐，会不会受到影响？
把最新的花朝格式LRC歌词同步也粘过来
’https://638183.freep.cn/638183/web/lrc/hclrc_only.js‘
这两个独立模块好，可以在任何地方使用呢，太好了{:4_199:} 红影 发表于 2025-8-12 20:48
这两个独立模块好，可以在任何地方使用呢，太好了
模块比之前的插件，在论坛的使用更为方便 红影 发表于 2025-8-12 20:40
逐字亮色同步歌词也用的原生歌词，这样可以么，如果有较长时间的过度音乐，会不会受到影响？
会。所以我开始时不太愿意做这个 花飞飞 发表于 2025-8-12 20:10
高亮色是经典配色，熟悉又好看
属性的颜色，熟悉的味道（酸酸甜甜苦苦辣辣滴）{:4_170:} 花飞飞 发表于 2025-8-12 20:09
原生歌词配置说明也有了，这加歌词好方便。。
简洁版的节省时间，高亮的设置更细致一些，可以有多种选择。 ...
两个都一样节省时间 这个做歌词前要先来仔细看懂 小辣椒 发表于 2025-8-12 21:56
这个做歌词前要先来仔细看懂
这个也是极简的 马黑黑 发表于 2025-8-12 20:52
模块比之前的插件，在论坛的使用更为方便
嗯嗯，把这个置顶了，大家想用的时候便于找到{:4_173:} 马黑黑 发表于 2025-8-12 20:53
会。所以我开始时不太愿意做这个
这是原生歌词的问题，没办法的。只要大差不差就行，这个还是挺好看的呢。 红影 发表于 2025-8-12 22:43
嗯嗯，把这个置顶了，大家想用的时候便于找到
这个不用的，那么简单，会一次就可以了 红影 发表于 2025-8-12 22:44
这是原生歌词的问题，没办法的。只要大差不差就行，这个还是挺好看的呢。
还行 这个置顶里应补充这个，就更完整了
花朝格式LRC歌词同步’https://638183.freep.cn/638183/web/lrc/hclrc_only.js‘ 马黑黑 发表于 2025-8-12 20:54
属性的颜色，熟悉的味道（酸酸甜甜苦苦辣辣滴）
嘻嘻，黑氏代码的标志性太强了。。
味道多印象深，酸溜溜排第一，这是谁排的{:4_170:} 马黑黑 发表于 2025-8-12 20:54
两个都一样节省时间
那我选高亮。。。功能多呗。。。加量不加价{:4_173:}