马黑黑音画贴在线制作程序及说明【原名：tzMaker音画贴子电饭煲】

花简静

💠tzMaker在线制作工具

帖子容器 音频 视频 小播 进度条 LRC歌词 全屏 </> 预览

偏 移 量 :

数字+px（例如：101px）

帖子宽度 :

（可选，例：1700px）

帖子高度 :

（可选，例：960px）

背景图片 :

背景设置 :

背景图片是否重复、位置、尺寸等，建议值

小播尺寸 :

数字+单位（例如：60px | 12%）

自定义CSS：（可选，例：.vid { opacity: 0.35; mix-blend-mode: screen;}）

音频地址 :

（请确保音频资源有效 网页云↑）

视频来源 : 熊猫 千库 其它

视频地址 :

相关CSS :

（可以设置尺寸、透明度等，例：opacity: 0.5;mix-blend-mode: screen;）

小播元素 : img div

图片地址 :

小播位置 :

建议值

（小播位置请使用css语法设置，left、top、right、bottom 纵横方向两两配对或只设置其中一个）

进度条设置 :

建议值

（位置支持 left、top、right、bottom 纵横方向两两配对或只设置其中一个。可以在此设置前景色和相关内容）

歌词格式 : 花潮格式 原生格式 | 歌词淡入效果 | 定位+其他设置 :

填写歌词 :（可选，有内容表示启用歌词同步，请注意歌词格式）

【例】

① 花朝格式 ：[[0.36,"歌词一",7.2],[11.52,"歌词二",7.8],[21.42,"歌词三",3.0]]
② 原生格式 ：[00:12.33]歌词一\n[01:42.78]歌词二[06:50.61]歌词三

【注】原生格式可以使用分行代替 \n
			

文本颜色 :

支持多种颜色表达法，例：#eee | gray | rgb(200,100,50)

按钮位置 :

（按钮位置请使用 left、right、top、bottom 纵横方向两两配套并按格式进行设置 ）

（可以完善代码再预览，所做修改切换编辑模块后代码会重置到前面的所有设置）

红色部分均可点击上屏

花简静

请在二楼点菜，挑选元素进行制作！！（重要！！）都有链接，请点击，把素材看完。。

一、贴子容器
二、音频库北帅音乐     本地音频实例
三、实例直接可取、视频资源1 视频资源2  视频资源3  视频资源4
四、小播（提供多种颜色小播图片供选用）
五、进度条
六：LRC歌词（花潮格式    原生格式）
七、全屏按纽(参照进度条颜色表）
八、生成代码</>和预览（直接点击看效果）

花简静

简单说明各个模块的使用方法和注意事项：

一、帖子容器
⒈ 帖子宽高 ：帖子的宽高设置非必须，因为 tzMaker 所引用的 css 使用了弹性设置以自适应不同的显示分辨率，但可根据需要设置帖子容器的宽高。
⒉ 自定义CSS ：可选。这里要求的数据是CSS选择器代码，一行一个选择器，例如：
.vid { mix-blend-mode: screen; opacity: 0.5; }
上面设置的是一个自定义视频标签，它在 tzMaker CSS 资源中已经设置了基本的样式，这里是追加属性设置：融合和透明度。这个选择器用于自定义视频，对应的视频设置模块应点选视频来源的“其它”子项。

二、音频
集成网易云音乐前缀的手动上屏功能：点击音频地址文本框下边的文字，wyy音频地址前缀上屏，加上音频的id即可。

三、视频
⒈ 视频来源视情况点选相应子项，不然对不上号，修饰效果会达不到预期。如果使用的是自定义（即其它）视频来源，且前面已经设置了 .vip {} 选择器，这里的相关CSS不用填写。
⒉ 相关CSS可选，觉得比要可以写入一些CSS属性值，例如透明度设置、尺寸等：
opacity: 0.5; width: 200px; height: 200px; border-radius: 50%; left: 100px; top: 100px;
⒊ 如果帖子不需要视频，“视频地址”输入框留空即可。

四、小播
通过工具制作的小播为简易版：使用 img 或 div 元素充当小播，任意一种都可以，同时都需要提供图片地址。小播默认使用 .ma 选择器制定的样式，在“帖子容器”设置中的“小播尺寸”子项针对的就是小播。小播在帖子中的位置在这里设置。需要高级功能版的效果请在生成代码之后修改对应源码。

五、进度条
利用工具制作的 tzMaker 音频播放进度条为简易版，背景进度条。在这里，至少需要设置进度条的位置。

六、LRC歌词
⒈ 歌词格式 ：分花潮格式和原生格式。二者的区别在于模拟逐字同步的精准度，后者没有手动掐算每句歌词的演唱用时。选择何种格式视自己准备的歌词格式而定。歌词数据的填写支持单行、分行，花朝格式的按数组内容的组织格式填写，原生格式的单行使用 \n 符号衔接各句、多行时每行一个 [mm:ss.nn]歌词 数据信息。
⒉ 歌词效果 ：淡入效果，可选，建议非花潮格式的歌词使用。
⒊ 歌词定位 ：默认绝对居中显示，可以自设位置。在这里，还可以以CSS属性设置的方式自定义歌词颜色、同步色（勾选淡入效果的设置无效），例如下面的设置（--c1和--c2时同步渐变参与颜色）——
top: 100px; color: gray; --c1: pink; --c2: purple;
竖版歌词设置代码：top: 30px;color: gray; --c1: pink; --c2: purple;writing-mode: vertical-lr;--rect: 0 0 100% 0;

七、全屏
可以设置的主要内容为定位、前景色（边框色与之同）等，例：color: #eee; left: 30px; bottom: 30px;

八、生成代码</>和预览
这里所生成的代码均来源于前面各个模块的设置，动态生成，修改这里的代码不会影响前面模块的数据且重新生成代码时仍然依据前面模块的设置。代码一旦生成则预览模块被激活，点击“预览”按钮则可查看帖子效果。若效果达不到预期，可以回头继续修改对应模块的相应数据。

【其他说明】
⒈ 工具不保存用户数据，所填写数据仅在当次使用时有效，关闭或刷新工具页面数据全部消失。
⒉ 有高级应用需求的可以在生成代码后将代码复制到Web页制作编辑器中进行修改，这将大大节省代码的组织成本。
⒊ 工具HTML文档会在测试满意之后再整理上传，需要本地运行工具的朋友敬请关注马黑永硕网盘，一般会放在“网络相关”目录。
⒋ 本工具和tzMaker均为手搓代码，加之水平有限，错误在所难免，若有发现错误或不合适指出，敬请指正。

                                                                                                                                                          马黑 2026年1月15日

花简静

一、认识界面的九个按纽


二、贴子容器说明


三、加入音频


四、加入视频


五、小播设置

花简静

六、进度条设置[/size]


七、歌词设置


八、全屏按纽设置


九、生成代码和预览设置

花简静

@雨声 @碧海  @清梦 @素心  @姚云裳  @狂飙 @愫怡 @云端漫步 @一鹿向北  @风清扬 @轻舞若芸  @游侠 @深呼吸 @小雨的心 @泪红颜   @柒玥 @醉美水芙蓉 @落字秋风 @紫百合 @扬帆 @忘记了 @婉清扬 @晚舟 @梦落潇湘 @星的祝福 @枝条 @宁月 @纳兰霏霏  @东篱闲人 @岁月如歌 @十指成林 @入云栖 @沐雪 @青石板 @朵拉 @仟婳 @西江月  @云笛 @风晴雪 @令狐冲 @雨的思念 @向荣S @玫の玫 @淥の詶  @雨的思念

花简静

下面进入实战试用，请用给的元素填空，一键生成音画贴。
1.图片地址：https://642303.freep.cn/642303/tu/20251229sywb.webp
2.音乐地址：2108803762    《我要的不是雪》 （网易云的音乐）
3.视频地址（选一个对应打勾）：h ttps://img.tukuppt.com/video_show/2629112/00/01/74/5b498b31c08a2.mp4（熊猫）
    或者：h ttps://bpic.588ku.com/video_listen/588ku_video/22/11/05/16/14/43/video63661b737c854.mp4（千库）
4.小播图片（选一张）：https://642303.freep.cn/642303/tu/xue0.png（一片雪花）
                                https://642303.freep.cn/642303/tu/xue1.png（雪花）

5.歌词《我要的不是雪》（两种格式选一种并对应打勾）：

原生格式歌词
        [00:00.588]单曲：我要的不是雪
        [00:00.892]我想要的不是雪
        [00:02.948]而是有你在身边
        [00:05.793]少了你的世界
        [00:08.65]再美也没有分别
        [00:10.648]我想要的不是风
        [00:12.692]而是你给的笑容
        [00:15.464]现在随人潮汹涌
        [00:17.436]而你变成一个梦
        [00:21.008]四下无人的夜
        [00:23.596]随着昙花一现
        [00:26.100]你又不期而至出现我心间
        [00:31.347]曾经你浓我浓的滴滴点点
        [00:36.768]无情的化作思念
        [00:40.992]暮色喧闹的街
        [00:43.200]灯火阑珊相邂
        [00:45.756]你说我是人海中惊鸿一瞥
        [00:50.684]怎么只因他们的私语窃窃
        [00:56.108]就对我假装看不见
        [01:02.148]我想要的不是雪
        [01:04.112]而是有你在身边
        [01:06.564]少了你的世界
        [01:09.61]再美也没有分别
        [01:11.676]我想要的不是风
        [01:13.888]而是你给的笑容
        [01:16.772]现在随人潮汹涌
        [01:18.848]而你变成一个梦
        [01:21.728]我想要的不是雪
        [01:23.748]而是有你在身边
        [01:26.196]少了你的世界
        [01:28.596]再美也没有分别
        [01:31.497]我想要的不是风
        [01:33.552]而是你给的笑容
        [01:36.336]现在随人潮汹涌
        [01:38.368]而你变成一个梦
      
      
花潮格式歌词：
[[0.39,"单曲：我要的不是雪（发发）",0.6],
        [1.02,"我想要的不是雪",1.5],
        [2.9,"而是有你在身边",2.1],
        [5.35,"少了你的世界",2.0],
        [7.86,"再美也没有分别",2.4],
        [10.66,"我想要的不是风",1.6],
        [12.67,"而是你给的笑容",2.4],
        [15.39,"现在随人潮汹涌",1.8],
        [17.51,"而你变成一个梦",2.5],
        [21.42,"四下无人的夜",1.9],
        [23.69,"随着昙花一现",2.1],
        [26.11,"你又不期而至出现我心间",3.8],
        [31.36,"曾经你浓我浓的滴滴点点",3.9],
        [36.51,"无情的化作思念",3.2],
        [41.09,"暮色喧闹的街",1.8],
        [43.23,"灯火阑珊相邂",2.1],
        [45.77,"你说我是人海中惊鸿一瞥",3.7],
        [50.71,"怎么只因他们的私语窃窃",4.2],
        [56.09,"就对我假装看不见",3.2],
        [62.15,"我想要的不是雪",1.6],
        [64.1,"而是有你在身边",2.1],
        [66.56,"少了你的世界",2.1],
        [69.01,"再美也没有分别",2.4],
        [71.62,"我想要的不是风",1.9],
        [73.91,"而是你给的笑容",2.4],
        [76.65,"现在随人潮汹涌",1.7],
        [78.79,"而你变成一个梦",2.3],
        [81.71,"我想要的不是雪",1.6],
        [83.71,"而是有你在身边",2.1],
        [86.19,"少了你的世界",2.0],
        [88.59,"再美也没有分别",2.5],
        [91.35,"我想要的不是风",1.7],
        [93.49,"而是你给的笑容",2.5],
        [96.27,"现在随人潮汹涌",1.8],
        [98.29,"而你变成一个梦",2.2]]
      

花简静

花简静

花简静