亲爱的小孩

马黑黑

马黑黑

本帖测试 tzMaker e 版。首先声明：tzMaker 的 .e.trial 版本尚未定型，仅供测试之用！

.e 的目标：

① 支持专辑歌词同步；
② 增添基于svg的指令，主要是，创建svg标签、创建svg基本图形、创建svg路径或图形进度器；
③ 梳理、完善全局函数

本帖所使用的 .e.trial 模块，已经初步达成上述目标，待细化、修Bug、进一步优化。

帖子代码在下一楼——

马黑黑

参考代码

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/tz/tz.e.trial.css';
   
3.         .pa { --offsetX: 81px; --ma-size: 160px; --bg: url('https://638183.freep.cn/638183/t24/w6/1019.webp') no-repeat center/cover; }
   
4. </style>
   
5. 
   
6. <div class="pa"></div>
   
7. 
   
8. <script type="module">
   
9.         import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.trial.js';
   
10.         const tz = TZ.TZ('pa'); // 创建帖笔
    
11. 
    
12.         // 花潮LRC歌词（有多少就创建多少）
    
13.         let gc1 = [[2,"...",8],[18.41,"...",4.6],[183.33,"...",9.7]];
    
14.         let gc2 = [[1.16,"...",7.2],[10.56,"...],[229.94,"...",6.2]];
    
15. 
    
16.         // 音乐清单（带歌词的加上LRC歌词数组变量）
    
17.         const musics = [
    
18.                 ['https://music.163.com/song/media/outer/url?id=419827621', '亲爱的小孩', gc1],
    
19.                 ['https://music.163.com/song/media/outer/url?id=419827618', '突然想起你'],
    
20.                 ['https://music.163.com/song/media/outer/url?id=419827634', 'Lydia', gc2],
    
21.                 ['https://music.163.com/song/media/outer/url?id=419827632', '嫉妒'],
    
22.                 ['https://music.163.com/song/media/outer/url?id=1907246482', '今生h还在一起吗'],
    
23.                 ['https://music.163.com/song/media/outer/url?id=1371760677', '人性']
    
24.         ];
    
25. 
    
26.         // 小播
    
27.         tz.add('img', '', 'ma', {
    
28.                 src: 'https://638183.freep.cn/638183/small/webp/f02.webp',
    
29.                 alt: '',
    
30.                 title: 'Alt+X',
    
31.                 style: 'bottom: 40px; border-radius: 50%;'
    
32.         }).playmp3();
    
33. 
    
34.         // 音乐列表
    
35.         tz.mlist(musics, 1, 'top: 20px;').style('left: 20px; bottom: 20px;');
    
36. 
    
37.         // 全屏
    
38.         tz.fs().style('right: 20px; bottom: 20px;');
    
39. 
    
40.         // 创建svg（进度器容器）
    
41.         tz.add('svg', 'msvg', '', {width: 200, height: 200, style: 'bottom: 20px;'});
    
42. 
    
43.         // 创建两个圆（进度器）
    
44.         tz.svgSon(msvg, 'circle', {
    
45.                 id: 'track',
    
46.                 cx: 100,
    
47.                 cy: 100,
    
48.                 r: 95,
    
49.                 fill: 'transparent',
    
50.                 stroke: 'lightblue',
    
51.                 'stroke-width': 8
    
52.         });
    
53.         tz.svgSon(msvg, 'circle', {
    
54.                 id: 'prog',
    
55.                 cx: 100,
    
56.                 cy: 100,
    
57.                 r: 95,
    
58.                 fill: 'transparent',
    
59.                 stroke: 'teal',
    
60.                 'stroke-width': 8
    
61.         });
    
62. 
    
63.         // 启用svg进度器（参数 : svg、底轨、进度轨）
    
64.         tz.svgprog(msvg, track, prog);
    
65. </script>

复制代码

（说明：歌词和歌单代码这里简化，提供的是结构性创建方法）

马黑黑

关于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首有歌词，后面两首没歌词了，倒也没什么影响，黑黑是特地这样做的吧

红影

这些歌曲都很好听，贪图听歌，听了半天都没回复帖子呢。
黑黑太厉害了，这么快 e 版本就来了，这么多好歌，都可以是带歌词的了，太好了

红影

一个小建议，没歌词的两个，可以让它们的歌名一直在，否则上面太空了。
这个是连续播放么？感觉好像是跳着播的呢。

马黑黑

红影 发表于 2025-10-19 13:23
一个小建议，没歌词的两个，可以让它们的歌名一直在，否则上面太空了。
这个是连续播放么？感觉好像是跳着 ...

关于播放：随机选曲。若观者手动选曲，当前播放的曲子停下，手动选曲播放完毕，回到随机播放机制。

关于歌词：由于需要兼顾无歌词帖，模块不对无歌词的曲子做专门的管理，但发帖者可以定义一个简短的歌词数组，例如——

const gc4 = [ [2,"歌名", 10] ];

一句歌词就能达到你建议的效果。

感谢反馈！

马黑黑

红影 发表于 2025-10-19 13:15
做一个这样的帖子也不容易，要弄这么多歌词呢。
这里的前4首有歌词，后面两首没歌词了，倒也没什么影响， ...

这是专门处理过的。任何一首没有歌词都可以，没有顺序规定，只要歌词变量能与歌曲对应得上

马黑黑

红影 发表于 2025-10-19 13:17
这些歌曲都很好听，贪图听歌，听了半天都没回复帖子呢。
黑黑太厉害了，这么快 e 版本就来了，这么多好歌 ...

这是预览版，我自己都还没有查错。另外，tzMaker 模块到现在止都没有做细查和优化，我的本意是让它形成一定规模后再做这部分的工作，现在 e 版可以进入这个环节了。

马黑黑

梦江南 发表于 2025-10-19 12:24
这帖太漂亮，太赞了！

红影

马黑黑 发表于 2025-10-19 13:39
关于播放：随机选曲。若观者手动选曲，当前播放的曲子停下，手动选曲播放完毕，回到随机播放机制。

关 ...

嗯嗯，知道了

红影

马黑黑 发表于 2025-10-19 13:41
这是专门处理过的。任何一首没有歌词都可以，没有顺序规定，只要歌词变量能与歌曲对应得上

这个是自动对应的吧。看着好像按顺序对应的。

红影

马黑黑 发表于 2025-10-19 13:43
这是预览版，我自己都还没有查错。另外，tzMaker 模块到现在止都没有做细查和优化，我的本意是让它形成一 ...

嗯嗯，黑黑做这个还是很有规划的

马黑黑

红影 发表于 2025-10-19 15:15
嗯嗯，黑黑做这个还是很有规划的

有一点点吧，差点还写计划书呢。我家妹纸说，你这么点东西还写计划书

马黑黑

红影 发表于 2025-10-19 14:40
这个是自动对应的吧。看着好像按顺序对应的。

顺不顺序都没啥，那个有歌词、是什么歌词，对应上就行

红影

马黑黑 发表于 2025-10-19 17:52
有一点点吧，差点还写计划书呢。我家妹纸说，你这么点东西还写计划书

工作习惯吧，有策划是好事，可以让各项工作可以有条不紊地开展了。

红影

马黑黑 发表于 2025-10-19 17:53
顺不顺序都没啥，那个有歌词、是什么歌词，对应上就行

嗯嗯，看到了，用变量名称去对应的。

马黑黑

红影 发表于 2025-10-19 23:03
嗯嗯，看到了，用变量名称去对应的。

说明里都说好的