tzMaker中级教程六
本讲主要讨论lrc歌词同步。
tzMaker的 tz.lrc() 指令采用模拟逐字同步做法,具体实现方式描述如下:在CSS层面,主要通过歌词标签伪元素的CSS关键帧动画达成进度歌词覆盖原始的效果——伪元素使用 background-path: text; 的属性配置做成高亮歌词、实际上就是将伪元素背景应用于文本渲染,这意味着可以使用纯色、渐变色和图片与进度歌词;在JS层面,需要调用模块者提供花潮格式的歌词数组,然后在指令中传参。
如果需要高度定制lrc歌词同步色,比如使用图片做歌词渲染,设置工作应在CSS中完成。以下CSS代码给歌词标签 .lrc 选择器 ::before 伪元素设置图片背景并应用到文本渲染中:
如果不使用图片,或者,仅需做些少量属性、变量值调整,在 tz.lrc() 指令中链式使用 style 指令设置歌词标签的行内 style 属性相对灵活,不用去考虑伪元素问题:
以上设置如果愿意,当然也可以全部在帖子CSS代码中完成,具体位置是在 .lrc { ... } 省略号处。
歌词的显示支持横排、竖排,具体实现原理和方法请查阅 tzMaker文档 有关创建LRC歌词标签条目。
让 tzMaker 模块实现歌词同步功能,还需要花朝格式的lrc歌词数组:声明一个自定义变量(例如叫 geci)并给它赋值,然后在指令中使用该变量作为参数传送给模块。歌花潮格式的lrc歌词可到 花潮LRC在线 制作或转换,其中,制作指使用纯歌词进行制作,每行一句歌词,制作完毕进入微调模式,在该模式下调整歌句演唱用时;转换指将原始lrc歌词转换为花潮格式,然后如上所述做后续微调工作。
tzMaker不集成对原生lrc歌词的直接支持,只接受和处理花朝格式的的歌词数组。但有一个变通的方法可以让tzMaker间接支持原生lrc歌词,那就是使用我们较早前做的函数或插件或模块,它们都能够生成花朝格式的歌词数组。还有一个可能更好的模块,它是在此前转换模块的基础上加入了新的算法即统计学分位数算法,生成的花朝格式歌词数组应该效果更理想,看该模块的导入和使用示例:
lrc2hc.js 模块导出的函数名为 lrc2HC,它可以将原生歌词转换为花潮格式的歌词数组,该数组和手动制作的歌词数组一样可以用于 tz.lrc() 指令。
因为此前的相关帖子对tzMaker歌词同步的介绍已经够详尽,本讲就不做过多的细节讨论,有不解的地方请查阅相关帖子或直接查阅tzMaker文档。
前一篇: tzMaker中级教程五
下一篇: 没有了
评论列表 [1条]
#1 | 小希 于 2025-11-24 20:53 发布: 歌词教程,帅😎

