tzMaker中级教程七
<style>.artBox { font-size: 18px; margin: 20px auto; max-width: 1200px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
</style>
<div class="artBox">
<p>本讲介绍如何使用 tzMaker 制作音乐专辑。</p>
<p><mark>mlist()</mark> 是音乐专辑的对标指令，m 指 music，list 是列表。这是一个复合型指令，集成了自动创建 audio 标签、歌单列表、lrc歌词同步（若有）等功能于一身，而参数仅三个，语法和应用如下：</p>
<div class="codebox">
<txt-green>// 语法</txt-green>
tz.mlist(<txt-blue>音频清单数组</txt-blue>, <txt-blue>是否启用lrc歌词同步</txt-blue>, <txt-blue>'lrc标签style代码'</txt-blue>);
<txt-green>//举例（变量 musics 是事先创建的歌单变量，后续会谈及具体创建方法）</txt-green>
tz.mlist(musics); <txt-green>// 无歌词专辑</txt-green>
<txt-green>// 歌词同步专辑，歌词标签定位于左下，歌单定位于右下</txt-green>
// tz.mlist(musics, true, 'left: 30px; bottom: 30px').style(right: 30px; bottom: 30px);
<txt-green>// 歌词同步专辑，歌词标签定位在帖子CSS代码设置，歌单在底部</txt-green>
// tz.mlist(musics, true).style('bottom: 20px');
</div>
<p>从应用举例代码中可以看到：参数一即歌单数组必选，参数二即是否带歌词同步可选，根据需要设置，参数三即lrc歌词标签的样式可选，根据设计偏好而定。下面专门讲讲歌单数组变量的创建，它应在 mlist() 指令之前弄好。下面举例说明：</p>
<div class="codebox" data-title="无歌词同步歌单伪代码">
const mp3Ar = [
['歌曲1地址', '歌名1'],
['歌曲2地址', '歌名2'],
['歌曲3地址', '歌名3'],
['歌曲N地址', '歌名N']
];
</div>
<p>可以看出，这是二维数组，mp3Ar 是变量名，中括号里面嵌套N多个中括号包裹的数据，每一行数据也是数组结构，标出歌曲地址和歌名，歌曲地址、歌名均使用小角引号包裹。再看：</p>
<div class="codebox" data-title="lrc歌词同步歌单伪代码">
<txt-green>// 先准备好歌词</txt-green>
const gc1 = [ , , ];
const gc2 = [ , , ];
const gc3 = [ , , ];
const gcN = [ , , ];
<txt-green>// 再创建歌单</txt-green>
const mp3Ar = [
['歌曲1地址', '歌名1', gc1],
['歌曲2地址', '歌名2', gc2],
['歌曲3地址', '歌名3', gc3],
['歌曲N地址', '歌名N', gcN]
];
</div>
<p>每一行歌单数据的子数组多了一个子元素，对应于前面创建的歌词，注意 <txt-red>gc*</txt-red> 是变量名，它们不能要用小角引号包裹。再看：</p>
<div class="codebox" data-title="部分lrc歌词同步歌单伪代码">
<txt-green>// 创建所需的歌词</txt-green>
const gc1 = [ , , ];
const gc3 = [ , , ];
<txt-green>// 创建歌单</txt-green>
const mp3Ar = [
['歌曲1地址', '歌名1', gc1],
['歌曲2地址', '歌名2'],
['歌曲3地址', '歌名3', gc3],
['歌曲N地址', '歌名N']
];
</div>
<p>这组歌单，不是所有的歌曲都带lrc同步，哪一首有就在第三个子元素标出歌词变量名称，没有就缺省。</p>
<p>前面的教程提到过，tzMaker 不支持原生lrc歌词同步，它只接受花朝格式的歌词数组，但可以通过其他手段将原生lrc歌词转为花潮格式的歌词数组。本讲的配套应用实例中，有一首歌曲使用花潮格式数据、其余的使用原生歌词，原生歌词通过另一个模块进行转换，源码如下：</p>
<div class="codebox" data-prev="1">
<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';
<txt-green>// 嘀嗒这首使用花潮格式的歌词数组</txt-green>
const dida = [,,,,,,,,,,,,,,,,,,,,,,,,];
<txt-green>// 其余四首使用原生lrc歌词</txt-green>
const ys1 = `毛泽少 - 伤心花\n编曲：丁培峰\n如果 天真有罪\n我愿为爱化成灰\n承受一天空的泪\n如果 真心负累\n我愿深埋你的美\n让爱长眠我心扉\n等伤心开出一朵花\n等心中的雨落下\n思念长出了白发\n用你的微笑来换我的傻\n等伤心开出一朵花\n等回忆的路坍塌\n用心中的尺 量你的天涯\n如果 天真有罪\n我愿为爱化成灰\n承受一天空的泪\n如果 真心负累\n我愿深埋你的美\n让爱长眠我心扉\n等伤心开出一朵花\n等心中的雨落下\n思念长出了白发\n用你的微笑来换我的傻\n等伤心开出一朵花\n等回忆的路坍塌\n用心中的尺 量你的天涯\n等伤心开出一朵花\n等心中的雨落下\n思念长出了白发\n用你的微笑来换我的傻\n等伤心开出一朵花\n等回忆的路坍塌\n用心中的尺 量你的天涯`;
const ys2 = `候康 - 鸟与人\n如果你感觉累了\n就请你闭上双眼\n如果你感觉倦了\n就请你快离开吧\n如果你没有翅膀\n就请你伸出双脚\n如果你不再留恋\n就请你停止哭泣\n向往自由的鸟\n去寻找安栖的岛\n仰望天空的人\n遥看着自由的鸟\n如果你感觉累了\n就请你睁开双眼\n如果你感觉倦了\n就请你快回来吧\n如果你没有翅膀\n就请你忘记飞翔\n如果你不再渴望\n就请你停止幻想\n向往自由的的鸟\n不曾找到安栖的岛\n仰望天空的人\n不会看到地上的路\n向往自由的鸟\n还在寻找安栖的岛\n仰望天空的人\n不曾低下倔强的头`;
const ys3 = `王胜娚 - Hate you\n阴霾的天气 我好像无法呼吸\n就像是沉浸在海底的鱼\n回味的过去 我好像快要忘记\n一直曾未离去身旁的你\n哎呦喂 白天变好黑\n哎呦喂 我想你\n哎呦喂 没出息\nHey Jude 爱不爱没关系\nHey Jude 别淘气\nHey Jude 煽动睫毛的情绪\nHey Jude 别放弃\n阴霾的天气 我好像无法呼吸\n就像是沉浸在海底的鱼\n回味的过去 我好像快要忘记\n一直曾未离去身旁的你\n哎呦喂 白天变好黑\n哎呦喂 我想你\n哎呦喂 没出息\nHey Jude 离开水活不下去\nHey Jude 需要你\nHey Jude 没有你的latte\nHey Jude 我爱你\nHey Jude 爱不爱没关系\nHey Jude 别淘气\nHey Jude 煽动睫毛的情绪\nHey Jude 别放弃\n-- End --`;
const ys4 = `一颗狼星 - 三千梦\n听说江南下雪时错过的人会在梦中重逢\n荒凉的江春雪落庭深深\n你眼中是昨夜清风星尘\n无题的诗文不见多情人\n落笔却凉了热忱\n爱是清醒梦醒时意沉沉\n毕生温柔换你的眼神\n最动情时分献上一个吻\n余生却无处可相认\n雪无声\n冽冽冬风\n似思念与日汹涌\n三千梦\n醒后无踪\n相拥后是消融\n三千梦枕上生\n自别后遥遥半生泪眼总濛濛\n和你一别情不忠梦不醒\n我应是半生沉沦做场清醒梦\n等风再吹去雪一程\n我本就荒废此身天地皆无声\n诗文却不认爱的笔锋\n谁不是误把当时明月作旧梦\n百年之后能否重逢\n爱是清醒梦醒时意沉沉\n毕生温柔换你的眼神\n最动情时分献上一个吻\n余生却无处可相认`;
const offsetData = ; <txt-green>// 偏移量数组</txt-green>
<txt-green>// 批量转为花朝格式数组并给出偏移量参数</txt-green>
const gcAr = .map((ys, key) => lrc2HC(ys, offsetData));
<txt-green>// 歌单数组</txt-green>
const musicAr = [
['https://music.163.com/song/media/outer/url?id=473441077', '毛泽少 - 伤心花', gcAr],
['https://music.163.com/song/media/outer/url?id=32685948', '侃侃 - 嘀嗒', dida],
['https://music.163.com/song/media/outer/url?id=36894566', '候康 - 鸟与人', gcAr],
['https://music.163.com/song/media/outer/url?id=305417', '王胜娚 - Hate You', gcAr],
['https://music.163.com/song/media/outer/url?id=2648196685', '一颗狼星 - 三千梦', gcAr],
];
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();
<txt-green>// 高能的 mlist() 指令 ：生成歌单、lrc歌词标签和 audio 标签</txt-green>
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>
</div>
<p>不要被密密麻麻的代码吓到，抓住重点、理清逻辑，自己动手做一个专辑并非难事。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 谢谢黑黑老师辛苦！学习了！{:4_187:} 制作一个专辑绝非易事，但有高能的 mlist() 指令的加持，一切都变得简捷与美妙，马老师您辛苦了{:4_176:} 我最喜欢了{:4_176:} 这个： const dida = [,,,,,,,,,,,,,,,,,,,,,,,,];
——是从哪里来的？ 樵歌 发表于 2025-11-23 15:03
这个： const dida = [,,
《嘀嗒》]是侃侃演唱的歌曲，是电视剧《北京爱情故事》的插曲，由高帝创作词曲，吴均桥编曲， 收录于音乐专辑《清音流韵》。 樵歌 发表于 2025-11-23 14:58
我最喜欢了
喜欢喝酒的人现在不太多了 杨帆 发表于 2025-11-23 14:41
制作一个专辑绝非易事，但有高能的 mlist() 指令的加持，一切都变得简捷与美妙，马老师您辛苦了
准备工作做足，其它都好办 梦江南 发表于 2025-11-23 13:58
谢谢黑黑老师辛苦！学习了！
{:4_190:} 马黑黑 发表于 2025-11-23 18:00
《嘀嗒》]是侃侃演唱的歌曲，是电视剧《北京爱情故事》的插曲，由高帝创作词曲，吴均桥编曲， 收录于音乐 ...
{:4_358:}我是说那个每句唱词和时间是怎么弄到手的{:4_203:} 马黑黑 发表于 2025-11-23 18:01
喜欢喝酒的人现在不太多了
咱坛子上不少{:4_172:} 樵歌 发表于 2025-11-23 19:08
咱坛子上不少
有几个顽固分子 樵歌 发表于 2025-11-23 19:07
我是说那个每句唱词和时间是怎么弄到手的
这个自己制作：
http://mhh.52qingyin.cn/api/pencilcode/lrc2ar.htm 马黑黑 发表于 2025-11-23 18:01
准备工作做足，其它都好办
是的，做好准备工作是前提{:4_185:} 杨帆 发表于 2025-11-23 19:46
是的，做好准备工作是前提
这个还不能一蹴而就 这个原生歌词的转换还可以批量进行呢，厉害了。{:4_187:} 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
这个还不能一蹴而就
是啊，做好一个专辑绝非易事，慢工才能出细活