花田错

马黑黑 发表于 2025-12-3 19:54

马黑黑 发表于 2025-12-3 19:55

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/hxtm.jpg') no-repeat center/cover; }
.fadeInLrc { top: 30px; animation: fadeIn .2s forwards, flash 1s infinite alternate var(--state); }
</style>

<div id="pa" class="pa"></div>

<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
const tz = TZ.TZ('pa');
const gc = `王睿卓 - 花田错\n我犯了错\n夜好深了纸窗里怎么亮着\n那不是彻夜等候你为我点的烛火\n不过是一次邂逅红楼那一场梦\n我的山水全部褪色像被大雨洗过\n杯中景色鬼魅我忘了我是谁\n心情就像夜凉如水\n手里握着蝴蝶杯单飞不醉不归\n花田里犯了错\n说好破晓前忘掉\n花田里犯了错\n拥抱变成了煎熬\n花田里犯了错\n犯错像迷恋镜花水月的无聊\n花田里犯了错\n请原谅我多情的打扰\n醉怎么会喝醉\n美因为你的美\n爱匆匆一瞥不过点缀\n飞看大雪纷飞\n却再也找不回\n被白雪覆盖那些青翠\n当时空成为拥有你\n唯一条件我又醉\n琥珀色的月结了霜的泪\n我会记得这段岁月\n花田里犯了错\n说好破晓前忘掉\n花田里犯了错\n拥抱变成了煎熬\n花田里犯了错\n犯错像迷恋镜花水月的无聊\n花田里犯了错\n请原谅我多情的打扰\n我的山水全部褪了色\n多情的打扰请原谅我\n不是彻夜为我点的火\n在那花田里我犯了错\n我的山水全部褪了色\n多情的打扰请原谅我\n不是彻夜为我点的火\n在那花田里我犯了错\n花田里犯了错\n说好破晓前忘掉\n花田里犯了错\n拥抱变成了煎熬\n花田里犯了错\n犯错像迷恋镜花水月的无聊\n花田里犯了错\n请原谅我多情的打扰\n我犯了错`;
const gcAr = tz.lrc2HC(gc, -0.1); //skip
tz.add('audio', '', '', {
   src: 'https://music.163.com/song/media/outer/url?id=3319366184'
});
tz.add('img', 'player', 'ma', {
   src: 'https://638183.freep.cn/638183/small/2025/ff1.webp',
   alt: ''
}).playmp3();
tz.bgprog().style('bottom: 30px; color: snow');
tz.lrc(gcAr, 'lrc', true);
tz.fs().style('right: 20px; bottom: 20px');
</script>

马黑黑 发表于 2025-12-3 19:56

tz.v4 模块新增功能：

（一）添加指令 lrc2HC(原生lrc歌词变量, 歌剧演唱事件偏移量[可选])，该指令将原生 lrc 歌词转换成花朝格式数组以便令 tz 模块处理，具体代码组织方式请参阅帖子代码第 12、13 行，12 行声明歌词变量，13 行将原生 lrc 歌词进行转换。注意，只有 tz.v4.js 这个模块起才拥有这个指令，此前各版本保持原样；

（二）升级 lrc 指令，具体是加一个可选参数，lrc(歌词数组变量, ‘CSS类名’,是否使用淡入淡出动画)，其中，后两个参数可选，但若启用淡入淡出歌词同步效果，则请按帖子代码第 22 行进行设置，其中，第二个参数无关紧要，留空 '' 也行，第三个参数设为 true 表示启用淡入淡出歌词同步效果（如果使用常规逐字同步效果，后两个参数都可以不用设置）。

其它注意事项：

淡入淡出依赖CSS设置，对应的lrc歌词标签class类名为 .fadeInLrc {}（04行代码），其内的span标签class类名为 .char {}，如果想竖排歌词，设置 .char { display: block; } 即可。

樵歌发表于 2025-12-3 20:48

漂亮大本营！{:4_208:}

红影发表于 2025-12-3 22:00

刚刚研究出的歌词同步新尝试，就已经封装好了，并有范例出来，黑黑真是神速啊{:4_199:}

红影发表于 2025-12-3 22:06

马黑黑发表于 2025-12-3 19:56
tz.v4 模块新增功能：

（一）添加指令 lrc2HC(原生lrc歌词变量, 歌剧演唱事件偏移量[可选])，该指令将 ...

这个封装新增了功能，原封装的功能越来越强大了呢{:4_199:}

马黑黑 发表于 2025-12-3 22:09

红影发表于 2025-12-3 22:06
这个封装新增了功能，原封装的功能越来越强大了呢

{:4_190:}

马黑黑 发表于 2025-12-3 22:10

樵歌发表于 2025-12-3 20:48
漂亮大本营！

{:4_191:}

马黑黑 发表于 2025-12-3 22:10

红影发表于 2025-12-3 22:00
刚刚研究出的歌词同步新尝试，就已经封装好了，并有范例出来，黑黑真是神速啊

整合是简单的

小辣椒 发表于 2025-12-3 22:30

看见黑黑这个彩色歌词的教程了，现在黑黑的花式多样花了，高手{:4_178:}

小辣椒 发表于 2025-12-3 22:50

这个歌词特别漂亮，很喜欢的{:4_205:}

马黑黑 发表于 2025-12-3 23:33

小辣椒发表于 2025-12-3 22:30
看见黑黑这个彩色歌词的教程了，现在黑黑的花式多样花了，高手

{:4_173:}

马黑黑 发表于 2025-12-3 23:33

小辣椒发表于 2025-12-3 22:50
这个歌词特别漂亮，很喜欢的

{:4_191:}

杨帆发表于 2025-12-3 23:59

漂亮~谢谢马老师经典示范{:4_190:}

阿狄丽娜 发表于 2025-12-4 05:16

赖学习了

樵歌发表于 2025-12-4 07:49

马黑黑发表于 2025-12-3 22:10

{:4_180:}

马黑黑 发表于 2025-12-4 08:56

樵歌发表于 2025-12-4 07:49

谢茶

马黑黑 发表于 2025-12-4 08:56

杨帆发表于 2025-12-3 23:59
漂亮~谢谢马老师经典示范

{:4_190:}

马黑黑 发表于 2025-12-4 08:57

阿狄丽娜发表于 2025-12-4 05:16
赖学习了

赖还是懒呢{:4_170:}{:4_203:}

偶然~ 发表于 2025-12-4 09:32

来欣赏马老师的精品佳作！

页: [1] 2 3

花潮论坛's Archiver

花田错