tzMaker中级教程七
本讲介绍如何使用 tzMaker 制作音乐专辑。
mlist() 是音乐专辑的对标指令，m 指 music，list 是列表。这是一个复合型指令，集成了自动创建 audio 标签、歌单列表、lrc歌词同步（若有）等功能于一身，而参数仅三个，语法和应用如下：
从应用举例代码中可以看到：参数一即歌单数组必选，参数二即是否带歌词同步可选，根据需要设置，参数三即lrc歌词标签的样式可选，根据设计偏好而定。下面专门讲讲歌单数组变量的创建，它应在 mlist() 指令之前弄好。下面举例说明：
const mp3Ar = [
['歌曲1地址', '歌名1'],
['歌曲2地址', '歌名2'],
['歌曲3地址', '歌名3'],
['歌曲N地址', '歌名N']
];
可以看出，这是二维数组，mp3Ar 是变量名，中括号里面嵌套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>
不要被密密麻麻的代码吓到，抓住重点、理清逻辑，自己动手做一个专辑并非难事。
发表评论:
评论列表 [1条]
#1 | 悄然 于 2025-11-24 20:55 发布: 花潮歌词和原生歌词同时使用，这个太好了，高度兼容
