亲爱的小孩
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.e.trial.css';
.pa { --offsetX: 81px; --ma-size: 160px; --bg: url('https://638183.freep.cn/638183/t24/w6/1019.webp') no-repeat center/cover; }
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.trial.js';
const tz = TZ.TZ('pa');
let gc1 = [,,,,,,,,,,,,,,,,,,,,,,];
let gc2 = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
let gc3 = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
let gc4 = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
const musics = [
['https://music.163.com/song/media/outer/url?id=419827621', '苏芮 - 亲爱的小孩', gc3],
['https://music.163.com/song/media/outer/url?id=419827634', 'F.I.R - Lydia', gc1],
['https://music.163.com/song/media/outer/url?id=419827618', '蔡琴 - 突然想起你', gc2],
['https://music.163.com/song/media/outer/url?id=419827632', '彭羚 - 嫉妒', gc4],
['https://music.163.com/song/media/outer/url?id=1907246482', '劳忠明 - 今生h还在一起吗'],
['https://music.163.com/song/media/outer/url?id=1371760677', '塞壬唱片 - 人性']
];
// 小播
tz.add('img', '', 'ma', {
src: 'https://638183.freep.cn/638183/small/webp/f02.webp',
alt: '',
title: 'Alt+X',
style: 'bottom: 40px; border-radius: 50%;'
}).playmp3();
tz.mlist(musics, 1, 'top: 20px;').style('left: 20px; bottom: 20px;');
tz.fs().style('right: 20px; bottom: 20px;');
tz.add('svg', 'msvg', '', {width: 200, height: 200, style: 'bottom: 20px;'});
tz.svgSon(msvg, 'circle', {
id: 'track',
cx: 100,
cy: 100,
r: 95,
fill: 'transparent',
stroke: 'lightblue',
'stroke-width': 8
});
tz.svgSon(msvg, 'circle', {
id: 'prog',
cx: 100,
cy: 100,
r: 95,
fill: 'transparent',
stroke: 'teal',
'stroke-width': 8
});
tz.svgprog(msvg, track, prog);
</script> 本帖最后由 马黑黑 于 2025-10-19 10:13 编辑
本帖测试 tzMaker e 版。首先声明：tzMaker 的 .e.trial 版本尚未定型，仅供测试之用！
.e 的目标：
① 支持专辑歌词同步；
② 增添基于svg的指令，主要是，创建svg标签、创建svg基本图形、创建svg路径或图形进度器；
③ 梳理、完善全局函数
本帖所使用的 .e.trial 模块，已经初步达成上述目标，待细化、修Bug、进一步优化。
帖子代码在下一楼—— 本帖最后由 马黑黑 于 2025-10-19 10:03 编辑
参考代码
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.e.trial.css';
.pa { --offsetX: 81px; --ma-size: 160px; --bg: url('https://638183.freep.cn/638183/t24/w6/1019.webp') no-repeat center/cover; }
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.trial.js';
const tz = TZ.TZ('pa'); // 创建帖笔
// 花潮LRC歌词（有多少就创建多少）
let gc1 = [,,];
let gc2 = [,,];
// 音乐清单（带歌词的加上LRC歌词数组变量）
const musics = [
['https://music.163.com/song/media/outer/url?id=419827621', '亲爱的小孩', gc1],
['https://music.163.com/song/media/outer/url?id=419827618', '突然想起你'],
['https://music.163.com/song/media/outer/url?id=419827634', 'Lydia', gc2],
['https://music.163.com/song/media/outer/url?id=419827632', '嫉妒'],
['https://music.163.com/song/media/outer/url?id=1907246482', '今生h还在一起吗'],
['https://music.163.com/song/media/outer/url?id=1371760677', '人性']
];
// 小播
tz.add('img', '', 'ma', {
src: 'https://638183.freep.cn/638183/small/webp/f02.webp',
alt: '',
title: 'Alt+X',
style: 'bottom: 40px; border-radius: 50%;'
}).playmp3();
// 音乐列表
tz.mlist(musics, 1, 'top: 20px;').style('left: 20px; bottom: 20px;');
// 全屏
tz.fs().style('right: 20px; bottom: 20px;');
// 创建svg（进度器容器）
tz.add('svg', 'msvg', '', {width: 200, height: 200, style: 'bottom: 20px;'});
// 创建两个圆（进度器）
tz.svgSon(msvg, 'circle', {
id: 'track',
cx: 100,
cy: 100,
r: 95,
fill: 'transparent',
stroke: 'lightblue',
'stroke-width': 8
});
tz.svgSon(msvg, 'circle', {
id: 'prog',
cx: 100,
cy: 100,
r: 95,
fill: 'transparent',
stroke: 'teal',
'stroke-width': 8
});
// 启用svg进度器（参数 : svg、底轨、进度轨）
tz.svgprog(msvg, track, prog);
</script>（说明：歌词和歌单代码这里简化，提供的是结构性创建方法）
本帖最后由 马黑黑 于 2025-10-19 10:36 编辑
关于svg相关的指令：
（一）创建 svg 标签
不需要专门的指令，直接使用 tz.add() 完成，只需指明标签名称为 svg，例如:
tz.add( 'svg', 'mysvg', {width: 200, height: 200, viewBox: '0 0 100 100'});
上例，创建了一个 id="mysvg" 的 svg 标签，宽度、高度和 viewBox 视口使用 {} 传参，创建出来的将是有宽高、视口的 svg 容器。
（二）在 svg 画布中绘制基本图形
指令 : tz.svgSon(svg, shape, {settings});
参数 : svg - 容器；shape - 图形名称，例如圆 circle，矩形 rect；settings: 放在花括号里，格式如（一）创建svg时的第三个参数。下面以画圆为例讲讲图像的绘制配置——
svg里的圆，需要圆心 cx、cy，半径 r，填充 fill，描边 stroke，描边宽度 stroke-width 等等属性配置，依次可以酱紫配置（顺序不论）：
{ cx: 100, cy: 100, r: 90, fill: 'none', stroke: 'red', 'stroke-width': 8}
凡是 svg 相应图形需要的或支持的属性，都可以写在花括号里，注意键值对的语法规范：键名一般不需要引号，但有短连接线 - 的键名必须有引号；键值都可以使用引号，纯数值可用可不用。
（三）创建 svg 进度器
指令：tz.svgprog(svg, son1, son2);
参数：svg - svg容器；son1 - 进度条底轨；son2 - 进度条指示轨。一般使用元素的id标识标识，详情参考例帖代码。
这帖太漂亮，太赞了！{:4_187:} 做一个这样的帖子也不容易，要弄这么多歌词呢。
这里的前4首有歌词，后面两首没歌词了，倒也没什么影响，黑黑是特地这样做的吧{:4_187:} 这些歌曲都很好听，贪图听歌，听了半天都没回复帖子呢。
黑黑太厉害了，这么快 e 版本就来了，这么多好歌，都可以是带歌词的了，太好了{:4_199:} 一个小建议，没歌词的两个，可以让它们的歌名一直在，否则上面太空了。
这个是连续播放么？感觉好像是跳着播的呢。 红影 发表于 2025-10-19 13:23
一个小建议，没歌词的两个，可以让它们的歌名一直在，否则上面太空了。
这个是连续播放么？感觉好像是跳着 ...
关于播放：随机选曲。若观者手动选曲，当前播放的曲子停下，手动选曲播放完毕，回到随机播放机制。
关于歌词：由于需要兼顾无歌词帖，模块不对无歌词的曲子做专门的管理，但发帖者可以定义一个简短的歌词数组，例如——
const gc4 = [ ];
一句歌词就能达到你建议的效果。
感谢反馈！ 红影 发表于 2025-10-19 13:15
做一个这样的帖子也不容易，要弄这么多歌词呢。
这里的前4首有歌词，后面两首没歌词了，倒也没什么影响， ...
这是专门处理过的。任何一首没有歌词都可以，没有顺序规定，只要歌词变量能与歌曲对应得上 红影 发表于 2025-10-19 13:17
这些歌曲都很好听，贪图听歌，听了半天都没回复帖子呢。
黑黑太厉害了，这么快 e 版本就来了，这么多好歌 ...
这是预览版，我自己都还没有查错。另外，tzMaker 模块到现在止都没有做细查和优化，我的本意是让它形成一定规模后再做这部分的工作，现在 e 版可以进入这个环节了。 梦江南 发表于 2025-10-19 12:24
这帖太漂亮，太赞了！
{:4_180:} 马黑黑 发表于 2025-10-19 13:39
关于播放：随机选曲。若观者手动选曲，当前播放的曲子停下，手动选曲播放完毕，回到随机播放机制。
关 ...
嗯嗯，知道了{:4_187:} 马黑黑 发表于 2025-10-19 13:41
这是专门处理过的。任何一首没有歌词都可以，没有顺序规定，只要歌词变量能与歌曲对应得上
这个是自动对应的吧。看着好像按顺序对应的。 马黑黑 发表于 2025-10-19 13:43
这是预览版，我自己都还没有查错。另外，tzMaker 模块到现在止都没有做细查和优化，我的本意是让它形成一 ...
嗯嗯，黑黑做这个还是很有规划的{:4_187:} 红影 发表于 2025-10-19 15:15
嗯嗯，黑黑做这个还是很有规划的
有一点点吧，差点还写计划书呢。我家妹纸说，你这么点东西还写计划书{:4_170:} 红影 发表于 2025-10-19 14:40
这个是自动对应的吧。看着好像按顺序对应的。
顺不顺序都没啥，那个有歌词、是什么歌词，对应上就行 马黑黑 发表于 2025-10-19 17:52
有一点点吧，差点还写计划书呢。我家妹纸说，你这么点东西还写计划书
工作习惯吧，有策划是好事，可以让各项工作可以有条不紊地开展了。 马黑黑 发表于 2025-10-19 17:53
顺不顺序都没啥，那个有歌词、是什么歌词，对应上就行
嗯嗯，看到了，用变量名称去对应的。{:4_204:} 红影 发表于 2025-10-19 23:03
嗯嗯，看到了，用变量名称去对应的。
说明里都说好的