弦意（tz.d 发布无歌词专辑演示）

马黑黑

马黑黑

代码：

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/tz/tz.d.css';
   
3.         .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/11.webp') no-repeat center/cover; --ma-size: 3vw; }
   
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.d.js';
   
10.         var tz = TZ.TZ('pa');
    
11. 
    
12.         var musics = [
    
13.                 ['https://music.163.com/song/media/outer/url?id=1981095072', 'EinWil / Jayx - 神姬'],
    
14.                 ['https://music.163.com/song/media/outer/url?id=492292805', 'Jannik - Sky Mirrors穹镜'],
    
15.                 ['https://music.163.com/song/media/outer/url?id=508093905', 'Jannik - 弦意'],
    
16.                 ['https://music.163.com/song/media/outer/url?id=411356357', 'eigenTunes亦听 - 墨家神机'],
    
17.                 ['https://music.163.com/song/media/outer/url?id=1460391047', 'AirJordy - 末'],
    
18.                 ['https://music.163.com/song/media/outer/url?id=366419', '墨明棋妙 - 二十二桥枫别雨'],
    
19.                 ['https://music.163.com/song/media/outer/url?id=25700050', '和平之月 - 宇宙'],
    
20.                 ['https://music.163.com/song/media/outer/url?id=28283678', '绍容 - Unicorn 麒麟']
    
21.         ];
    
22. 
    
23.         tz.add('video', '', 'pd-vid', {
    
24.                 src: 'https://img.tukuppt.com/video_show/15653652/01/27/12/62650aab384cc.mp4'
    
25.         });
    
26. 
    
27.         tz.mlist(musics).style('right: 20px; top: 20px;');
    
28. 
    
29.         tz.bgprog().style('left: 70px; bottom: 20px;');
    
30. 
    
31.         tz.add('img', '', 'ma', {
    
32.                 src: 'https://638183.freep.cn/638183/small/2025/disc.webp',
    
33.                 style: 'left: 160px; bottom: 40px;'
    
34.         }).playmp3();
    
35. 
    
36.         tz.fs().style('bottom: 20px; right: 100px;');
    
37. </script>

复制代码

发专辑步骤：

第一步：准备歌单，详细代码在第 12~21 行。

注意歌单是一个JS二维数组，结构是酱紫——

    var 歌单 = [
        ['地址', '歌名'],
        ['地址', '歌名'],
    ];

其中变量名 歌单 名称自己定义，合法、好记就行，建议使用汉语拼音表示，例如 gedan，你要用中文也成。

第二步：创建帖子歌词列表，代码在第 27 行。

指令：tz.mlist(歌单数组名称)

假设前面准备的歌单变量名是 gedan，那指令代码写成：

    tz.mlist(gedan);

然后，我们希望安排一下歌单在帖子中的位置，用 style() 链式指令完成：

    tz.mlist(gedan).style('left: 20px; top: 20px;');

style() 是 tz.d 以前的版本都有的指令，用来补充设置所创建元素的CSS内联样式（行内临时设定的样式，县官不如现管中的现管样式，完全是CSS代码的写法，但注意CSS代码的头尾需要小角引号）。

就这两步。其余的如小播、视频、进度条等等元素的加入，一如过去 tz 版本方法。

梦江南

精彩！谢谢黑黑老师辛苦！

马黑黑

发专辑步骤：

第一步：准备歌单，详细代码在第 12~21 行。

注意歌单是一个JS二维数组，结构是酱紫——

    var 歌单 = [
        ['地址', '歌名'],
        ['地址', '歌名'],
    ];

其中变量名 歌单 名称自己定义，合法、好记就行，建议使用汉语拼音表示，例如 gedan，你要用中文也成。

第二步：创建帖子歌词列表，代码在第 27 行。

指令：tz.mlist(歌单数组名称)

假设前面准备的歌单变量名是 gedan，那指令代码写成：

    tz.mlist(gedan);

然后，我们希望安排一下歌单在帖子中的位置，用 style() 链式指令完成：

    tz.mlist(gedan).style('left: 20px; top: 20px;');

style() 是 tz.d 以前的版本都有的指令，用来补充设置所创建元素的CSS内联样式（行内临时设定的样式，县官不如现管中的现管样式，完全是CSS代码的写法，但注意CSS代码的头尾需要小角引号）。

就这两步。其余的如小播、视频、进度条等等元素的加入，一如过去 tz 版本方法。

马黑黑

梦江南 发表于 2025-10-18 07:52
精彩！谢谢黑黑老师辛苦！

早

红影

就这么点代码，就能创建音乐专辑了，这个太厉害了

红影

背景图很简洁，正好用来放置进度条和小播、全屏按钮、音乐列表，这些一上去，让简单的背景图忽然就不那么简单了。
最主要的是视频，黑黑每次选的视频都那么巧妙地烘托了背景，太赞了

红影

这些音乐都很好听，音乐列表式鼠标触碰才出现，不遮挡页面。
黑黑的设计很匠心

马黑黑

红影 发表于 2025-10-18 08:28
这些音乐都很好听，音乐列表式鼠标触碰才出现，不遮挡页面。
黑黑的设计很匠心

很多功能模块都是以前做好的、存在的，现在根据插件运行环境做些修改就能用

马黑黑

红影 发表于 2025-10-18 08:23
背景图很简洁，正好用来放置进度条和小播、全屏按钮、音乐列表，这些一上去，让简单的背景图忽然就不那么简 ...

视频的选择主要依据木柄放大镜

马黑黑

红影 发表于 2025-10-18 08:21
就这么点代码，就能创建音乐专辑了，这个太厉害了

JS在推出 ES 模块理念以前，人们就通过其他方式实现了模块功能，而非简单的插件。历史上，至少有两种曾经盛行的模块实现方式，JS维护者因此觉得JS也必须有模块功能，ES就这样出来了。tzMaker使用的是ES6，主要是考虑兼容性问题，尽可能支持较低内核的现代浏览器（我定的起点版本是 chrome 60）。如果使用 ES2025，开发效率还要高，不过这只是开发层面，做出来的成品使用者不会有明显感受。

樵歌

好咧好咧

樵歌

全盘归抄，只歌址谢谢

樵歌

连这些好听的歌也一并顺走，绝不嬚少

樵歌

网易云音乐，连会员都下载不了，不知道你是怎么弄到地址的

马黑黑

樵歌 发表于 2025-10-18 11:40
网易云音乐，连会员都下载不了，不知道你是怎么弄到地址的

欢乐水吧不是有一个帖子专门说这个吗？应该是固顶的，现在还管用。

网易推出了一些新的机制，但是，开放性占比还是很高的，登录网页版后，凡不打 vip 标签的歌曲都可以外链，就按那个帖子的说道去处理即可。

马黑黑

樵歌 发表于 2025-10-18 11:38
连这些好听的歌也一并顺走，绝不嬚少

马黑黑

樵歌 发表于 2025-10-18 11:37
全盘归抄，只歌址谢谢

小辣椒

这个要吃透代码的用途，才能做出自己喜欢的效果，感觉要花点时间的

小辣椒

感觉纯直接套用是简单的