在雨中（tzMaker d.trial应用测试）

马黑黑 · 发表于 2025-10-14 12:46

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

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

x

马黑黑 · 发表于 2025-10-14 12:47

代码

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.d.trial.css';
.pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/rain.webp') no-repeat center/cover; --ma-size: 3vw; }
/* 小播内部零件尺寸及切割、旋转中心等设置，代码偏长单独放这 */
.rect { width: 25%; height: 50%; clip-path: polygon(50% 0, 0 25%, 50% 100%, 100% 25%, 50% 0); transform-origin: center bottom; }
</style>
<div id="tiezi" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.d.trial.js';
const tz = TZ.TZ('pa');
// 歌词（花朝格式）
let geci = [ [0.8,"《在雨中》-演唱：劉家昌，尤雅",0.6], [1.45,"··· 前奏（鋼琴，絃樂）···",17.6], [19,"在雨中我送過你",4.0], [24.9,"在夜裡我吻過你",4.0], [30.78,"在春天我擁有你",5.0], [36.69,"在冬季我離開你",4.2], [42.58,"有相聚也有分離",4.6], [48.58,"人生本是一段戲",4.1], [54.44,"有歡笑也有哭泣",4.6], [60.41,"不知誰能誰能躲得過去",5.5], [66.71,"你說人生豔麗我沒有異議",4.6], [72.76,"你說人生憂鬱我不言語",5.1], [79.29,"只有默默地承受這一切",3.8], [84.15,"承受數不盡的春來冬去",5.7], [90.76,"你說人生豔麗我沒有異議",4.3], [96.76,"你說人生憂鬱我不言語",4.9], [102.61,"只有默默地承受這一切",4.8], [108,"承受數不盡的春來冬去",5.8], [115.16,"··· 間奏（鋼琴）···",11.3], [126.43,"在雨中我送過你",3.9], [132.16,"在夜裡我吻過你",4.6], [137.91,"在春天我擁有你",4.5], [143.97,"在冬季我離開你",4.5], [149.95,"有相聚也有分離",4.4], [155.88,"人生本是一齣戲",4.5], [162.17,"有歡笑也有哭泣",4.2], [167.56,"不知誰能誰能躲得過去",5.6], [174.13,"你說人生豔麗我沒有異議",4.5], [180.19,"你說人生憂鬱我不言語",4.9], [186.12,"只有默默地承受這一切",4.6], [191.45,"承受數不盡的春來冬去",5.6],[197.93,"你說人生豔麗我沒有異議",4.8], [203.93,"你說人生憂鬱我不言語",5.2], [209.9,"只有默默地承受這一切",4.7], [215.11,"承受數不盡的春來冬去",5.8], [222,"你說人生豔麗我沒有異議",4.5], [227.7,"你說人生憂鬱我不言語",5.1], [233.61,"只有默默地承受這一切",4.7], [239.04,"承受數不盡的春來冬去",6.0], [245.46,"啦 ··· 啦 ··· 啦 ···",21.6]];
// 大熊视频
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3c0b41744.mp4'
});
// 加上音频
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=1408969463'
});
/** 以下创建LRC歌词同步标签
除left、top定位必须设置，其余可以缺省使用默认配置
style() 指令的设置可以搬到CSS代码，置入 .lrc {} 选择器中
指令里面的内容需要分行写时使用反引号，写在一行可用单引号
**/
tz.lrc(geci).style(`
left: 20px; /* 定位 : 必须 */
top: 20px; /* 定位 : 必须 */
color: silver; /* 前景色 : 可选（默认wheat）*/
writing-mode: vertical-lr; /* 排版方向 : 可选（默认横向）*/
--rect: 0 0 100% 0; /* 排版方向配套属性 : 可选（默认0 100% 0 0）*/
--c1: white; /* 渐变颜色1 : 可选（默认橙色）*/
--c2: cyan; /* 渐变颜色2 : 可选（默认黄色）*/
--deg: to left; /* 渐变角度或方向 : 可选（默认180deg）*/
--border: 0 1px 0 0; /* 同步线条 : 可选（默认0 0 1px 0）*/
`);
// 创建进度条 : 设置位置和进度颜色
tz.bgprog().style('left: calc(30% - 70px); bottom: 20px; --prog: lightblue;');
// 创建一个 id="player" 的标签，加三个类名，还定位、设置子元素布局行为
tz.add('div', 'player', 'wrap100 rot-ani cursor', {
title: 'Alt+X', style: 'left: 30%; bottom: 50px; place-items: start center;'
}).playmp3();
// 小播内部零件装进 id="player" 标签
tz.lzRot(8, 'player', {className: 'rect'});
// 全屏 : 并设置定位和颜色
tz.fs().style('top: 20px; right: 20px; color: lightblue;');
</script>

复制代码

马黑黑 · 发表于 2025-10-14 12:59

tzMaker d 版对标歌词同步。由于开发基于 ES 环境，加入新功能相对简单，且歌词同步功能早做有独特的可移植模块，所以从 c 升到 d 不费力气，调整、测试用了点时间。

tz.d 很容易实现竖版歌词，原因主要是：歌词同步的实现方式是切割路径 clip-path，用的是基本形状切割 inset，内部矩形。

歌词标签的设置略微琐细，这是没有办法的——不精细打磨出不了精品。