弦意（tz.d 发布无歌词专辑演示）
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.d.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/11.webp') no-repeat center/cover; --ma-size: 3vw; }
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.d.js';
var tz = TZ.TZ('pa');
var musics = [
['https://music.163.com/song/media/outer/url?id=1981095072', 'EinWil / Jayx - 神姬'],
['https://music.163.com/song/media/outer/url?id=492292805', 'Jannik - Sky Mirrors穹镜'],
['https://music.163.com/song/media/outer/url?id=508093905', 'Jannik - 弦意'],
['https://music.163.com/song/media/outer/url?id=411356357', 'eigenTunes亦听 - 墨家神机'],
['https://music.163.com/song/media/outer/url?id=1460391047', 'AirJordy - 末'],
['https://music.163.com/song/media/outer/url?id=366419', '墨明棋妙 - 二十二桥枫别雨'],
['https://music.163.com/song/media/outer/url?id=25700050', '和平之月 - 宇宙'],
['https://music.163.com/song/media/outer/url?id=28283678', '绍容 - Unicorn 麒麟']
];
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/15653652/01/27/12/62650aab384cc.mp4'
});
tz.mlist(musics).style('right: 20px; top: 20px;');
tz.bgprog().style('left: 70px; bottom: 20px;');
tz.add('img', '', 'ma', {
src: 'https://638183.freep.cn/638183/small/2025/disc.webp',
style: 'left: 160px; bottom: 40px;'
}).playmp3();
tz.fs().style('bottom: 20px; right: 100px;');
</script> 本帖最后由 马黑黑 于 2025-10-18 08:08 编辑
代码：
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.d.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/11.webp') no-repeat center/cover; --ma-size: 3vw; }
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.d.js';
var tz = TZ.TZ('pa');
var musics = [
['https://music.163.com/song/media/outer/url?id=1981095072', 'EinWil / Jayx - 神姬'],
['https://music.163.com/song/media/outer/url?id=492292805', 'Jannik - Sky Mirrors穹镜'],
['https://music.163.com/song/media/outer/url?id=508093905', 'Jannik - 弦意'],
['https://music.163.com/song/media/outer/url?id=411356357', 'eigenTunes亦听 - 墨家神机'],
['https://music.163.com/song/media/outer/url?id=1460391047', 'AirJordy - 末'],
['https://music.163.com/song/media/outer/url?id=366419', '墨明棋妙 - 二十二桥枫别雨'],
['https://music.163.com/song/media/outer/url?id=25700050', '和平之月 - 宇宙'],
['https://music.163.com/song/media/outer/url?id=28283678', '绍容 - Unicorn 麒麟']
];
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/15653652/01/27/12/62650aab384cc.mp4'
});
tz.mlist(musics).style('right: 20px; top: 20px;');
tz.bgprog().style('left: 70px; bottom: 20px;');
tz.add('img', '', 'ma', {
src: 'https://638183.freep.cn/638183/small/2025/disc.webp',
style: 'left: 160px; bottom: 40px;'
}).playmp3();
tz.fs().style('bottom: 20px; right: 100px;');
</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 版本方法。 精彩！谢谢黑黑老师辛苦！{:4_190:} 发专辑步骤：
第一步：准备歌单，详细代码在第 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
精彩！谢谢黑黑老师辛苦！
早 就这么点代码，就能创建音乐专辑了，这个太厉害了{:4_199:} 背景图很简洁，正好用来放置进度条和小播、全屏按钮、音乐列表，这些一上去，让简单的背景图忽然就不那么简单了。
最主要的是视频，黑黑每次选的视频都那么巧妙地烘托了背景，太赞了{:4_199:} 这些音乐都很好听，音乐列表式鼠标触碰才出现，不遮挡页面。
黑黑的设计很匠心{:4_187:} 红影 发表于 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，开发效率还要高，不过这只是开发层面，做出来的成品使用者不会有明显感受。 好咧好咧{:4_178:}{:4_176:} 全盘归抄，只歌址{:4_205:}谢谢{:4_176:} 连这些好听的歌也一并顺走，绝不嬚少{:4_170:} 网易云音乐，连会员都下载不了，不知道你是怎么弄到地址的{:4_203:} 樵歌 发表于 2025-10-18 11:40
网易云音乐，连会员都下载不了，不知道你是怎么弄到地址的
欢乐水吧不是有一个帖子专门说这个吗？应该是固顶的，现在还管用。
网易推出了一些新的机制，但是，开放性占比还是很高的，登录网页版后，凡不打 vip 标签的歌曲都可以外链，就按那个帖子的说道去处理即可。 樵歌 发表于 2025-10-18 11:38
连这些好听的歌也一并顺走，绝不嬚少
{:4_173:} 樵歌 发表于 2025-10-18 11:37
全盘归抄，只歌址谢谢
{:4_191:} 这个要吃透代码的用途，才能做出自己喜欢的效果，感觉要花点时间的 感觉纯直接套用是简单的