tzMaker中级教程六
<style>.artBox { font-size: 18px; margin: 20px auto; max-width: 1200px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
</style>
<div class="artBox">
<p>本讲主要讨论lrc歌词同步。</p>
<p>tzMaker的 <mark>tz.lrc()</mark> 指令采用模拟逐字同步做法，具体实现方式描述如下：在CSS层面，主要通过歌词标签伪元素的CSS关键帧动画达成进度歌词覆盖原始的效果——伪元素使用 <mark>background-path: text;</mark> 的属性配置做成高亮歌词、实际上就是将伪元素背景应用于文本渲染，这意味着可以使用纯色、渐变色和图片与进度歌词；在JS层面，需要调用模块者提供花潮格式的歌词数组，然后在指令中传参。</p>
<p>如果需要高度定制lrc歌词同步色，比如使用图片做歌词渲染，设置工作应在CSS中完成。以下CSS代码给歌词标签 .lrc 选择器 ::before 伪元素设置图片背景并应用到文本渲染中：</p>
<div class="codebox">
<txt-green>/* 歌词底色 */</txt-green>
.lrc { color: white; }
<txt-green>/* 歌词进度色 */</txt-green>
.lrc::before {
background: url('图片地址') no-repeat center/cover;
background-clip: text; <txt-green>/* 背景剪裁 */</txt-green>
-webkit-background-clip: text; <txt-green>/* 兼容考虑 */</txt-green>
}
</div>
<p>如果不使用图片，或者，仅需做些少量属性、变量值调整，在 tz.lrc() 指令中链式使用 style 指令设置歌词标签的行内 style 属性相对灵活，不用去考虑伪元素问题：</p>
<div class="codebox">
tz.lrc(geci).style(`
left : 20px;
top: 20px;
color: silver; <txt-green>/* 歌词底色 */</txt-green>
--c1: green; <txt-green>/* 歌词底色渐变色之一 */</txt-green>
--c2: snow; <txt-green>/* 歌词底色渐变色之二 */</txt-green>
`);
</div>
<p>以上设置如果愿意，当然也可以全部在帖子CSS代码中完成，具体位置是在 .lrc { ... } 省略号处。</p>
<p>歌词的显示支持横排、竖排，具体实现原理和方法请查阅 <a href="http://mhh.52qingyin.cn/api/tz/#h4_4">tzMaker文档</a> 有关创建LRC歌词标签条目。</p>
<p>让 tzMaker 模块实现歌词同步功能，还需要花朝格式的lrc歌词数组：声明一个自定义变量（例如叫 geci）并给它赋值，然后在指令中使用该变量作为参数传送给模块。歌花潮格式的lrc歌词可到 <a href="http://mhh.52qingyin.cn/api/pencilcode/lrc2ar.htm" target="_blank">花潮LRC在线</a> 制作或转换，其中，制作指使用纯歌词进行制作，每行一句歌词，制作完毕进入微调模式，在该模式下调整歌句演唱用时；转换指将原始lrc歌词转换为花潮格式，然后如上所述做后续微调工作。</p>
<p>tzMaker不集成对原生lrc歌词的直接支持，只接受和处理花朝格式的的歌词数组。但有一个变通的方法可以让tzMaker间接支持原生lrc歌词，那就是使用我们较早前做的函数或插件或模块，它们都能够生成花朝格式的歌词数组。还有一个可能更好的模块，它是在此前转换模块的基础上加入了新的算法即统计学分位数算法，生成的花朝格式歌词数组应该效果更理想，看该模块的导入和使用示例：</p>
<div class="codebox">
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
import lrc2HC from 'https://638183.freep.cn/638183/web/tz/lrc2hc.js';
const tz = TZ.TZ('pa');
const lrcText = `
歌词一
歌词二
歌词三
歌词四
`;
const geci = lrc2HC(lrcText); <txt-green>// 转换为花朝格式</txt-green>
tz.add('audio', '', '', { src: '音乐地址' });
tz.lrc(geci); <txt-green>// 指令支持第二个参数，时间偏移，例如 zt.lrc(geci, 0.2);</txt-green>
</script>
</div>
<p>lrc2hc.js 模块导出的函数名为 lrc2HC，它可以将原生歌词转换为花潮格式的歌词数组，该数组和手动制作的歌词数组一样可以用于 tz.lrc() 指令。</p>
<p>因为此前的相关帖子对tzMaker歌词同步的介绍已经够详尽，本讲就不做过多的细节讨论，有不解的地方请查阅相关帖子或直接查阅tzMaker文档。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 打通了lrc歌词花与朝格式歌词之间的壁垒，tzMaker的歌词同步之路更宽广{:4_176:}
肯定好用，但我用不起来，都想要二传手{:4_170:} 谢谢黑黑老师辛苦，学习了。{:4_190:} 杨帆 发表于 2025-11-23 13:38
打通了lrc歌词花与朝格式歌词之间的壁垒，tzMaker的歌词同步之路更宽广
不过，使用转换而来的歌词数据，精准度有很多不确定因素。当然，对付精准度问题有很多其它方法，大家可以去探索。 梦江南 发表于 2025-11-23 15:02
谢谢黑黑老师辛苦，学习了。
{:4_190:} 樵歌 发表于 2025-11-23 14:57
肯定好用，但我用不起来，都想要二传手
你是主攻手，跳起来一击而成的那类C位运动员 马黑黑 发表于 2025-11-23 18:04
你是主攻手，跳起来一击而成的那类C位运动员
我是啦啦 队副队长{:4_358:} 樵歌 发表于 2025-11-23 19:05
我是啦啦 队副队长
那是后来的事情 马黑黑 发表于 2025-11-23 18:03
不过，使用转换而来的歌词数据，精准度有很多不确定因素。当然，对付精准度问题有很多其它方法，大家可以 ...
精准度能达到基本要求就行。
对付精准度问题有很多其它方法呢？请马老师示例说明一下{:4_180:} 歌词里的选用的东西还挺多的，比如横排还是竖排，是否有歌词下的线条等。 使用图片还能使用动态图图，想起你用的粒子动图做的那个，很奇妙。 杨帆 发表于 2025-11-23 19:58
精准度能达到基本要求就行。
对付精准度问题有很多其它方法呢？请马老师示例说明一下
比如，当上一句歌词和下一句歌词的时间差为12秒，但上一句歌词只唱5秒，可以插入一个空的歌词：
歌词一
歌词二 红影 发表于 2025-11-23 20:15
歌词里的选用的东西还挺多的，比如横排还是竖排，是否有歌词下的线条等。
大家都比较熟悉CSS，这些都基于CSS 红影 发表于 2025-11-23 20:16
使用图片还能使用动态图图，想起你用的粒子动图做的那个，很奇妙。
图片就是图片，不论静态动态，都是图片，是图片，就可以做背景 马黑黑 发表于 2025-11-23 20:27
比如，当上一句歌词和下一句歌词的时间差为12秒，但上一句歌词只唱5秒，可以插入一个空的歌词：
谢谢老师~好像明白了一点点{:4_173:} 杨帆 发表于 2025-11-23 20:37
谢谢老师~好像明白了一点点
其实有很多方法的，都是需要自己去琢磨 马黑黑 发表于 2025-11-23 20:41
其实有很多方法的，都是需要自己去琢磨
是，挺不容易的，有个不离谱的精确度足矣 {:4_173:} 杨帆 发表于 2025-11-23 20:43
是，挺不容易的，有个不离谱的精确度足矣
离不离谱其实看歌曲特征。有一些歌曲，歌句有时大致不会相差太大，这一类就很好使 马黑黑 发表于 2025-11-23 20:44
离不离谱其实看歌曲特征。有一些歌曲，歌句有时大致不会相差太大，这一类就很好使
看来异曲未必同工，好在我们追求的只是一个大致相差不大{:4_185:}