tzMaker中级教程七

马黑黑

本讲介绍如何使用 tzMaker 制作音乐专辑。

mlist() 是音乐专辑的对标指令，m 指 music，list 是列表。这是一个复合型指令，集成了自动创建 audio 标签、歌单列表、lrc歌词同步（若有）等功能于一身，而参数仅三个，语法和应用如下：

// 语法 tz.mlist(音频清单数组, 是否启用lrc歌词同步, 'lrc标签style代码'); //举例（变量 musics 是事先创建的歌单变量，后续会谈及具体创建方法） tz.mlist(musics); // 无歌词专辑 // 歌词同步专辑，歌词标签定位于左下，歌单定位于右下 // tz.mlist(musics, true, 'left: 30px; bottom: 30px').style(right: 30px; bottom: 30px); // 歌词同步专辑，歌词标签定位在帖子CSS代码设置，歌单在底部 // tz.mlist(musics, true).style('bottom: 20px');

从应用举例代码中可以看到：参数一即歌单数组必选，参数二即是否带歌词同步可选，根据需要设置，参数三即lrc歌词标签的样式可选，根据设计偏好而定。下面专门讲讲歌单数组变量的创建，它应在 mlist() 指令之前弄好。下面举例说明：

const mp3Ar = [ ['歌曲1地址', '歌名1'], ['歌曲2地址', '歌名2'], ['歌曲3地址', '歌名3'], ['歌曲N地址', '歌名N'] ];

可以看出，这是二维数组，mp3Ar 是变量名，中括号里面嵌套N多个中括号包裹的数据，每一行数据也是数组结构，标出歌曲地址和歌名，歌曲地址、歌名均使用小角引号包裹。再看：

// 先准备好歌词 const gc1 = [ [2,"歌句一",4], [8.2,"歌句二",6.5], [15.06,"歌句N",4.32] ]; const gc2 = [ [1.5,"歌句一",3.4], [7.13,"歌句二",4.6], [16,"歌句N",3] ]; const gc3 = [ [1.75,"歌句一",3.84], [8.02,"歌句二",4], [14.5,"歌句N",5] ]; const gcN = [ [2.5,"歌句一",9], [17.02,"歌句二",5.86], [25,"歌句N",8] ]; // 再创建歌单 const mp3Ar = [ ['歌曲1地址', '歌名1', gc1], ['歌曲2地址', '歌名2', gc2], ['歌曲3地址', '歌名3', gc3], ['歌曲N地址', '歌名N', gcN] ];

每一行歌单数据的子数组多了一个子元素，对应于前面创建的歌词，注意 gc* 是变量名，它们不能要用小角引号包裹。再看：

// 创建所需的歌词 const gc1 = [ [2,"歌句一",4], [8.2,"歌句二",6.5], [15.06,"歌句N",4.32] ]; const gc3 = [ [1.75,"歌句一",3.84], [8.02,"歌句二",4], [14.5,"歌句N",5] ]; // 创建歌单 const mp3Ar = [ ['歌曲1地址', '歌名1', gc1], ['歌曲2地址', '歌名2'], ['歌曲3地址', '歌名3', gc3], ['歌曲N地址', '歌名N'] ];

这组歌单，不是所有的歌曲都带lrc同步，哪一首有就在第三个子元素标出歌词变量名称，没有就缺省。

前面的教程提到过，tzMaker 不支持原生lrc歌词同步，它只接受花朝格式的歌词数组，但可以通过其他手段将原生lrc歌词转为花潮格式的歌词数组。本讲的配套应用实例中，有一首歌曲使用花潮格式数据、其余的使用原生歌词，原生歌词通过另一个模块进行转换，源码如下：

<style> @import 'https://638183.freep.cn/638183/web/tz/tz.v3.css'; .pa { offsetX: 0px; --bg: url('https://638183.freep.cn/638183/t24/w7/sqm.webp') no-repeat center/cover; } </style> <div id="pa" class="pa"></div> <script type="module"> import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js'; import lrc2HC from 'https://638183.freep.cn/638183/web/tz/lrc2hc.js'; // 嘀嗒这首使用花潮格式的歌词数组 const dida = [[2,"侃侃 - 嘀嗒",12.0],[24.55,"嘀嗒嘀嗒嘀嗒嘀嗒",3.7],[30.18,"时针它不停在转动",3.7],[35.87,"嘀嗒嘀嗒嘀嗒嘀嗒",3.7],[41.88,"小雨它拍打着水花",4.2],[47.84,"嘀嗒嘀嗒嘀嗒嘀嗒",3.3],[53.67,"是不是还会牵挂他",3.6],[59.51,"嘀嗒嘀嗒嘀嗒嘀嗒",3.3],[65.41,"有几滴眼泪已落下",3.8],[74.31,"嘀嗒嘀嗒嘀嗒嘀嗒",3.6],[80.03,"寂寞的夜和谁说话",3.6],[85.93,"嘀嗒嘀嗒嘀嗒嘀嗒",3.3],[91.67,"伤心的泪儿谁来擦",4.1],[97.59,"嘀嗒嘀嗒嘀嗒嘀嗒",3.4],[103.41,"整理好心情再出发",3.8],[109.35,"嘀嗒嘀嗒嘀嗒嘀嗒",3.4],[115.11,"还会有人把你牵挂",4.2],[168.01,"嘀嗒嘀嗒嘀嗒嘀嗒",3.3],[173.63,"寂寞的夜和谁说话",3.7],[179.57,"嘀嗒嘀嗒嘀嗒嘀嗒",3.6],[185.27,"伤心的泪儿谁来擦",4.1],[191.28,"嘀嗒嘀嗒嘀嗒嘀嗒",3.5],[197.04,"整理好心情再出发",3.8],[202.92,"嘀嗒嘀嗒嘀嗒嘀嗒",3.4],[208.7,"还会有人把你牵挂",4.6]]; // 其余四首使用原生lrc歌词 const ys1 = `[00.02.00]毛泽少 - 伤心花\n[00:09.96]编曲：丁培峰\n[00:13.52]如果 天真有罪\n[00:17.16]我愿为爱化成灰\n[00:20.53]承受一天空的泪\n[00:27.15]如果 真心负累\n[00:30.91]我愿深埋你的美\n[00:34.22]让爱长眠我心扉\n[00:41.71]等伤心开出一朵花\n[00:44.16]等心中的雨落下\n[00:48.34]思念长出了白发\n[00:50.71]用你的微笑来换我的傻\n[00:55.40]等伤心开出一朵花\n[00:57.65]等回忆的路坍塌\n[01:01.97]用心中的尺 量你的天涯\n[01:09.59]如果 天真有罪\n[01:12.79]我愿为爱化成灰\n[01:16.53]承受一天空的泪\n[01:23.26]如果 真心负累\n[01:26.69]我愿深埋你的美\n[01:30.15]让爱长眠我心扉\n[01:37.16]等伤心开出一朵花\n[01:40.09]等心中的雨落下\n[01:44.23]思念长出了白发\n[01:46.71]用你的微笑来换我的傻\n[01:51.17]等伤心开出一朵花\n[01:53.46]等回忆的路坍塌\n[01:57.68]用心中的尺 量你的天涯\n[02:19.53]等伤心开出一朵花\n[02:22.78]等心中的雨落下\n[02:26.40]思念长出了白发\n[02:28.62]用你的微笑来换我的傻\n[02:33.16]等伤心开出一朵花\n[02:35.54]等回忆的路坍塌\n[02:40.32]用心中的尺 量你的天涯`; const ys2 = `[00:03.51]候康 - 鸟与人\n[00:26.67]如果你感觉累了\n[00:33.06]就请你闭上双眼\n[00:39.68]如果你感觉倦了\n[00:46.11]就请你快离开吧\n[00:52.73]如果你没有翅膀\n[00:59.27]就请你伸出双脚\n[01:05.69]如果你不再留恋\n[01:12.18]就请你停止哭泣\n[01:18.71]向往自由的鸟\n[01:25.04]去寻找安栖的岛\n[01:31.83]仰望天空的人\n[01:38.31]遥看着自由的鸟\n[02:10.97]如果你感觉累了\n[02:17.35]就请你睁开双眼\n[02:23.93]如果你感觉倦了\n[02:30.36]就请你快回来吧\n[02:36.94]如果你没有翅膀\n[02:43.42]就请你忘记飞翔\n[02:50.00]如果你不再渴望\n[02:56.43]就请你停止幻想\n[03:03.21]向往自由的的鸟\n[03:09.14]不曾找到安栖的岛\n[03:15.92]仰望天空的人\n[03:22.15]不会看到地上的路\n[03:29.04]向往自由的鸟\n[03:35.12]还在寻找安栖的岛\n[03:42.10]仰望天空的人\n[03:48.23]不曾低下倔强的头`; const ys3 = `[00:02.97]王胜娚 - Hate you\n[00:25.01]阴霾的天气 我好像无法呼吸\n[00:30.40]就像是沉浸在海底的鱼\n[00:37.02]回味的过去 我好像快要忘记\n[00:42.51]一直曾未离去身旁的你\n[00:48.79]哎呦喂 白天变好黑\n[00:54.16]哎呦喂 我想你\n[01:00.75]哎呦喂 没出息\n[01:06.19]Hey Jude 爱不爱没关系\n[01:12.93]Hey Jude 别淘气\n[01:18.22]Hey Jude 煽动睫毛的情绪\n[01:24.83]Hey Jude 别放弃\n[01:54.71]阴霾的天气 我好像无法呼吸\n[02:00.44]就像是沉浸在海底的鱼\n[02:06.51]回味的过去 我好像快要忘记\n[02:12.35]一直曾未离去身旁的你\n[02:18.97]哎呦喂 白天变好黑\n[02:24.24]哎呦喂 我想你\n[02:30.13]哎呦喂 没出息\n[02:36.49]Hey Jude 离开水活不下去\n[02:42.57]Hey Jude 需要你\n[02:48.69]Hey Jude 没有你的latte\n[02:54.73]Hey Jude 我爱你\n[03:00.47]Hey Jude 爱不爱没关系\n[03:06.91]Hey Jude 别淘气\n[03:12.60]Hey Jude 煽动睫毛的情绪\n[03:19.02]Hey Jude 别放弃\n[03:35.52]-- End --`; const ys4 = `[00:02.10]一颗狼星 - 三千梦\n[00:08.85]听说江南下雪时错过的人会在梦中重逢\n[00:19.38]荒凉的江春雪落庭深深\n[00:24.96]你眼中是昨夜清风星尘\n[00:30.60]无题的诗文不见多情人\n[00:36.51]落笔却凉了热忱\n[00:41.76]爱是清醒梦醒时意沉沉\n[00:47.31]毕生温柔换你的眼神\n[00:52.83]最动情时分献上一个吻\n[00:58.86]余生却无处可相认\n[01:03.96]雪无声\n[01:05.16]冽冽冬风\n[01:09.99]似思念与日汹涌\n[01:15.21]三千梦\n[01:17.88]醒后无踪\n[01:21.06]相拥后是消融\n[01:24.18]三千梦枕上生\n[01:28.50]自别后遥遥半生泪眼总濛濛\n[01:34.02]和你一别情不忠梦不醒\n[01:39.66]我应是半生沉沦做场清醒梦\n[01:45.57]等风再吹去雪一程\n[01:50.79]我本就荒废此身天地皆无声\n[01:56.25]诗文却不认爱的笔锋\n[02:01.95]谁不是误把当时明月作旧梦\n[02:07.92]百年之后能否重逢\n[02:22.14]爱是清醒梦醒时意沉沉\n[02:27.75]毕生温柔换你的眼神\n[02:33.24]最动情时分献上一个吻\n[02:38.94]余生却无处可相认`; const offsetData = [0, 0, 0, -0.3]; // 偏移量数组 // 批量转为花朝格式数组并给出偏移量参数 const gcAr = [ys1, ys2, ys3, ys4].map((ys, key) => lrc2HC(ys, offsetData[key])); // 歌单数组 const musicAr = [ ['https://music.163.com/song/media/outer/url?id=473441077', '毛泽少 - 伤心花', gcAr[0]], ['https://music.163.com/song/media/outer/url?id=32685948', '侃侃 - 嘀嗒', dida], ['https://music.163.com/song/media/outer/url?id=36894566', '候康 - 鸟与人', gcAr[1]], ['https://music.163.com/song/media/outer/url?id=305417', '王胜娚 - Hate You', gcAr[2]], ['https://music.163.com/song/media/outer/url?id=2648196685', '一颗狼星 - 三千梦', gcAr[3]], ]; const tz = TZ.TZ('pa'); tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/02/06/5b500bc3cfd48.mp4', style: 'width: 15vw; height: 16vw; left: 10px; top: 20%; border-radius: 50%; cursor: pointer; pointer-events: auto' }).playmp3(); // 高能的 mlist() 指令 ：生成歌单、lrc歌词标签和 audio 标签 tz.mlist(musicAr, true, 'bottom: 60px; --border : 0;').style('left: 20px; bottom: 20px'); tz.add('img', '', 'ma', { src: 'https://638183.freep.cn/638183/small/mufuz2.jpg' }) .style('bottom: 120px; clip-path: circle(45%)') .playmp3(); tz.bgprog().style('bottom: 20px'); tz.fs().style('right: 20px; bottom: 20px'); </script>

不要被密密麻麻的代码吓到，抓住重点、理清逻辑，自己动手做一个专辑并非难事。

梦江南

谢谢黑黑老师辛苦！学习了！

杨帆

制作一个专辑绝非易事，但有高能的 mlist() 指令的加持，一切都变得简捷与美妙，马老师您辛苦了

樵歌

我最喜欢了

樵歌

这个：        const dida = [[2,"侃侃 - 嘀嗒",12.0],[24.55,"嘀嗒嘀嗒嘀嗒嘀嗒",3.7],[30.18,"时针它不停在转动",3.7],[35.87,"嘀嗒嘀嗒嘀嗒嘀嗒",3.7],[41.88,"小雨它拍打着水花",4.2],[47.84,"嘀嗒嘀嗒嘀嗒嘀嗒",3.3],[53.67,"是不是还会牵挂他",3.6],[59.51,"嘀嗒嘀嗒嘀嗒嘀嗒",3.3],[65.41,"有几滴眼泪已落下",3.8],[74.31,"嘀嗒嘀嗒嘀嗒嘀嗒",3.6],[80.03,"寂寞的夜和谁说话",3.6],[85.93,"嘀嗒嘀嗒嘀嗒嘀嗒",3.3],[91.67,"伤心的泪儿谁来擦",4.1],[97.59,"嘀嗒嘀嗒嘀嗒嘀嗒",3.4],[103.41,"整理好心情再出发",3.8],[109.35,"嘀嗒嘀嗒嘀嗒嘀嗒",3.4],[115.11,"还会有人把你牵挂",4.2],[168.01,"嘀嗒嘀嗒嘀嗒嘀嗒",3.3],[173.63,"寂寞的夜和谁说话",3.7],[179.57,"嘀嗒嘀嗒嘀嗒嘀嗒",3.6],[185.27,"伤心的泪儿谁来擦",4.1],[191.28,"嘀嗒嘀嗒嘀嗒嘀嗒",3.5],[197.04,"整理好心情再出发",3.8],[202.92,"嘀嗒嘀嗒嘀嗒嘀嗒",3.4],[208.7,"还会有人把你牵挂",4.6]];
——是从哪里来的？

马黑黑

樵歌 发表于 2025-11-23 15:03
这个：        const dida = [[2,"侃侃 - 嘀嗒",12.0],[24.55,"嘀嗒嘀嗒嘀嗒嘀嗒",3.7],[30.18,"时针它不停在转动" ...

《嘀嗒》]是侃侃演唱的歌曲，是电视剧《北京爱情故事》的插曲，由高帝创作词曲，吴均桥编曲， 收录于音乐专辑《清音流韵》。

马黑黑

樵歌 发表于 2025-11-23 14:58
我最喜欢了

喜欢喝酒的人现在不太多了

马黑黑

杨帆 发表于 2025-11-23 14:41
制作一个专辑绝非易事，但有高能的 mlist() 指令的加持，一切都变得简捷与美妙，马老师您辛苦了

准备工作做足，其它都好办

马黑黑

梦江南 发表于 2025-11-23 13:58
谢谢黑黑老师辛苦！学习了！

樵歌

马黑黑 发表于 2025-11-23 18:00
《嘀嗒》]是侃侃演唱的歌曲，是电视剧《北京爱情故事》的插曲，由高帝创作词曲，吴均桥编曲， 收录于音乐 ...

我是说那个每句唱词和时间是怎么弄到手的

樵歌

马黑黑 发表于 2025-11-23 18:01
喜欢喝酒的人现在不太多了

咱坛子上不少

马黑黑

樵歌 发表于 2025-11-23 19:08
咱坛子上不少

有几个顽固分子

马黑黑

樵歌 发表于 2025-11-23 19:07
我是说那个每句唱词和时间是怎么弄到手的

这个自己制作：

http://mhh.52qingyin.cn/api/pencilcode/lrc2ar.htm

杨帆

马黑黑 发表于 2025-11-23 18:01
准备工作做足，其它都好办

是的，做好准备工作是前提

马黑黑

杨帆 发表于 2025-11-23 19:46
是的，做好准备工作是前提

这个还不能一蹴而就

红影

这个原生歌词的转换还可以批量进行呢，厉害了。

红影

tz.mkist(musics); // 无歌词专辑——这里面的mkist事mlist么？

马黑黑

红影 发表于 2025-11-23 20:28
tz.mkist(musics); // 无歌词专辑——这里面的mkist事mlist么？

一看就看得出是写错了

马黑黑

红影 发表于 2025-11-23 20:25
这个原生歌词的转换还可以批量进行呢，厉害了。

没什么不可以的。这里：

一、将多个歌词变量变为数组；
二、迭代数组，使用函数 lrc2HC 将它们一一转换为花潮格式

杨帆

马黑黑 发表于 2025-11-23 20:24
这个还不能一蹴而就

是啊，做好一个专辑绝非易事，慢工才能出细活