花田错

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

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

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

x

马黑黑 · 发表于 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 = `[00:00.600]王睿卓 - 花田错\n[00:09.28]我犯了错\n[00:17.76]夜好深了纸窗里怎么亮着\n[00:20.57]那不是彻夜等候你为我点的烛火\n[00:24.41]不过是一次邂逅红楼那一场梦\n[00:28.16]我的山水全部褪色像被大雨洗过\n[00:31.92]杯中景色鬼魅我忘了我是谁\n[00:35.62]心情就像夜凉如水\n[00:38.65]手里握着蝴蝶杯单飞不醉不归\n[00:45.98]花田里犯了错\n[00:47.25]说好破晓前忘掉\n[00:52.60]花田里犯了错\n[00:56.81]拥抱变成了煎熬\n[01:00.74]花田里犯了错\n[01:01.88]犯错像迷恋镜花水月的无聊\n[01:06.91]花田里犯了错\n[01:10.18]请原谅我多情的打扰\n[01:31.84]醉怎么会喝醉\n[01:34.89]美因为你的美\n[01:36.81]爱匆匆一瞥不过点缀\n[01:39.73]飞看大雪纷飞\n[01:42.00]却再也找不回\n[01:44.48]被白雪覆盖那些青翠\n[01:47.54]当时空成为拥有你\n[01:49.84]唯一条件我又醉\n[01:54.11]琥珀色的月结了霜的泪\n[01:58.53]我会记得这段岁月\n[02:01.89]花田里犯了错\n[02:03.68]说好破晓前忘掉\n[02:08.20]花田里犯了错\n[02:10.42]拥抱变成了煎熬\n[02:16.07]花田里犯了错\n[02:17.34]犯错像迷恋镜花水月的无聊\n[02:22.59]花田里犯了错\n[02:24.85]请原谅我多情的打扰\n[02:31.98]我的山水全部褪了色\n[02:34.68]多情的打扰请原谅我\n[02:38.16]不是彻夜为我点的火\n[02:42.38]在那花田里我犯了错\n[02:45.66]我的山水全部褪了色\n[02:49.70]多情的打扰请原谅我\n[02:52.94]不是彻夜为我点的火\n[02:56.10]在那花田里我犯了错\n[02:59.56]花田里犯了错\n[03:00.62]说好破晓前忘掉\n[03:06.35]花田里犯了错\n[03:08.13]拥抱变成了煎熬\n[03:13.47]花田里犯了错\n[03:15.01]犯错像迷恋镜花水月的无聊\n[03:20.74]花田里犯了错\n[03:22.45]请原谅我多情的打扰\n[03:35.29]我犯了错`;
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; } 即可。