tzMaker中级教程六

马黑黑 · 发表于 2025-11-23 13:15

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本讲主要讨论lrc歌词同步。

tzMaker的 tz.lrc() 指令采用模拟逐字同步做法，具体实现方式描述如下：在CSS层面，主要通过歌词标签伪元素的CSS关键帧动画达成进度歌词覆盖原始的效果——伪元素使用 background-path: text; 的属性配置做成高亮歌词、实际上就是将伪元素背景应用于文本渲染，这意味着可以使用纯色、渐变色和图片与进度歌词；在JS层面，需要调用模块者提供花潮格式的歌词数组，然后在指令中传参。

如果需要高度定制lrc歌词同步色，比如使用图片做歌词渲染，设置工作应在CSS中完成。以下CSS代码给歌词标签 .lrc 选择器 ::before 伪元素设置图片背景并应用到文本渲染中：

/* 歌词底色 */ .lrc { color: white; } /* 歌词进度色 */ .lrc::before { background: url('图片地址') no-repeat center/cover; background-clip: text; /* 背景剪裁 */ -webkit-background-clip: text; /* 兼容考虑 */ }

如果不使用图片，或者，仅需做些少量属性、变量值调整，在 tz.lrc() 指令中链式使用 style 指令设置歌词标签的行内 style 属性相对灵活，不用去考虑伪元素问题：

tz.lrc(geci).style(` left : 20px; top: 20px; color: silver; /* 歌词底色 */ --c1: green; /* 歌词底色渐变色之一 */ --c2: snow; /* 歌词底色渐变色之二 */ `);

以上设置如果愿意，当然也可以全部在帖子CSS代码中完成，具体位置是在 .lrc { ... } 省略号处。

歌词的显示支持横排、竖排，具体实现原理和方法请查阅 tzMaker文档有关创建LRC歌词标签条目。

让 tzMaker 模块实现歌词同步功能，还需要花朝格式的lrc歌词数组：声明一个自定义变量（例如叫 geci）并给它赋值，然后在指令中使用该变量作为参数传送给模块。歌花潮格式的lrc歌词可到花潮LRC在线制作或转换，其中，制作指使用纯歌词进行制作，每行一句歌词，制作完毕进入微调模式，在该模式下调整歌句演唱用时；转换指将原始lrc歌词转换为花潮格式，然后如上所述做后续微调工作。

tzMaker不集成对原生lrc歌词的直接支持，只接受和处理花朝格式的的歌词数组。但有一个变通的方法可以让tzMaker间接支持原生lrc歌词，那就是使用我们较早前做的函数或插件或模块，它们都能够生成花朝格式的歌词数组。还有一个可能更好的模块，它是在此前转换模块的基础上加入了新的算法即统计学分位数算法，生成的花朝格式歌词数组应该效果更理想，看该模块的导入和使用示例：

lrc2hc.js 模块导出的函数名为 lrc2HC，它可以将原生歌词转换为花潮格式的歌词数组，该数组和手动制作的歌词数组一样可以用于 tz.lrc() 指令。

因为此前的相关帖子对tzMaker歌词同步的介绍已经够详尽，本讲就不做过多的细节讨论，有不解的地方请查阅相关帖子或直接查阅tzMaker文档。