网站首页 › ┫教程交流┣ › 【马黑黑tzMaker音画贴子电饭煲】使用及说明

花简静 发表于 前天 14:25

【马黑黑tzMaker音画贴子电饭煲】使用及说明

<style>
        #mum { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); padding: 20px; width: 1200px; font: normal 16px/24px Consolas,'Courier New','Andale Mono',monospace; background: #fefdfc; box-shadow: 2px 2px 6px gray; position: relative; }
        #mum * { box-sizing: border-box; }
        #mum input { padding: 4px 8px; font-size: 16px; }
        #mum textarea { padding: 20px; font-size: 18px; }
        #toolBar { display: flex; gap: 10px; width: 100%; height: 40px; }
        #toolBar button { min-width: 80px; }
        #divWrap { margin: 10px 0; min-height: 640px; position: relative; }
        #divWrap div { width: 100%; height: 100%; padding: 20px; position: absolute; }
        #showDiv { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,.99); display: none; padding: 0; overflow: hidden; z-index: 1000; margin: 0; }
        #showDiv::after { position: absolute; content: '关闭预览'; top: 20px; right: 20px; padding: 0 4px; width: 80px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #efe; border-radius: 6px; background: #eee; color: red; font-size: 14px; box-shadow: 2px 2px 6px rgba(0,0,0,.25); cursor: pointer; }
        #showDiv iframe { position: relative; width: 100%; height: 100%; border: none; outline: none; margin: 0; }
        #codeTextArea { width: 100%; height: 95%; }
        .grow2 { flex-grow: 2; }
        .hidden { display: none; }
        .appear { display: block; }
        .Red { color: red; }
        .width500 { width: 500px; }
        .width1000 { width: 1000px; }
        .height300 { height: 300px; width: 900px; }
        .height200 { height: 200px; width: 900px; }
        .txtMid { padding: 10px 0; text-align: center; }
        .click { color: red; cursor: pointer; }
</style>

<h1 class="txtMid">&#128160;tzMaker在线制作工具</h1>
<div id="mum">
        <div id="toolBar">
                <button class="btnItem" title="设置帖子CSS">帖子容器</button>
                <button class="btnItem" title="设置MP3">音频</button>
                <button class="btnItem" title="设置视频">视频</button>
                <button class="btnItem" title="设置播放器">小播</button>
                <button class="btnItem" title="设置进度条">进度条</button>
                <button class="btnItem" title="添加LRC歌词">LRC歌词</button>
                <button class="btnItem" title="设置全屏按钮">全屏</button>
                <span class="grow2"></span>
                <button class="btnItem" title="生成代码">&lt;/&gt;</button>
                <button id="btnShow" disabled title="预览效果">预览</button>
        </div>
        <div id="divWrap">
                <!-- 帖子容器 -->
                <div class="hidden appear">
                        <label for="txtOffset">偏 移 量 : </label>
                        <input id="txtOffset" type="text" value="0px" title="偏移量要带 px 等单位">
                        <output>数字+px（例如：<span class="click" onclick="txtOffset.value='101px'">101px</span>）</output>
                        <br><br>
                        <label for="txtWidth">帖子宽度 : </label>                       
                        <input type="text" value="" id="txtWidth" title="留空使用CSS默认设置，自定义需要带 px 等单位">
                        <output>（可选，例：<span class="click" onclick="txtWidth.value='1700px'">1700px</span>）</output>
                        <label for="txtHeight">帖子高度 : </label>
                        <input type="text" value="" id="txtHeight" title="可以留空，自定义记得带 px 等单位"></input>
                        <output>（可选，例：<span class="click" onclick="txtHeight.value='960px'">960px</span>）</output><br><br>
                        <label for="txtBg">背景图片 : </label>
                        <input id="txtBg" type="text" class="width1000" value="" title="仅填写图片地址"><br><br>
                        <label for="txtBgSetting">背景设置 : </label>
                        <input id="txtBgSetting" type="text" class="width500" value="no-repeat center/cover">
                        <output>背景图片是否重复、位置、尺寸等，<span class="click" onclick="txtBgSetting.value='no-repeat center/cover'">建议值</span></output><br><br>
                        <label for="txtMaSize">小播尺寸 : </label>
                        <input id="txtMaSize" type="text" value="3%">
                        <output>数字+单位（例如：60px | <span class="click" onclick="txtMaSize.value='12%'">12%</span>）</output><br><br>
                        <label for="txtSelfCss">自定义CSS：（可选，例：<span class="click" onclick="txtSelfCss.value='.vid { opacity: 0.35;mix-blend-mode: screen; }'">.vid { opacity: 0.35; mix-blend-mode: screen;}</span>）</label>
                        <p class="txtMid"><textarea id="txtSelfCss" class="height200"></textarea></p>
                </div>
                <!-- 音频 -->
                <div class="hidden">
                        <label for="txtAudio">音频地址 : </label>
                        <input id="txtAudio" type="text" class="width1000" value=""><br><br>
                        <output>（请确保音频资源有效<span class="click" onclick="txtAudio.value='https://music.163.com/song/media/outer/url?id='"> 网易云↑</span>）</output><br><br>
                </div>
                <!-- 视频设置 -->
                <div class="hidden" id="tzVid">
                        <label>视频来源 : </label>
                        <input type="radio" name="radVid" value="pd-vid" id="pd-vid" checked>
                        <label for="pd-vid">熊猫</label>
                        <input type="radio" name="radVid" value="qk-vid" id="qk-vid">
                        <label for="qk-vid">千库</label>
                        <input type="radio" name="radVid" value="vid" id="vid">
                        <label for="vid">其它</label><br><br>
                        <label for="txtVideo">视频地址 : </label>
                        <input id="txtVideo" type="text" class="width1000" value=""><br><br>
                        <label>相关CSS : </label>
                        <input type="text" id="txtVidCSS" class="width500" value="">
                        <output>（可以设置尺寸、透明度等，例：opacity: 0.5;mix-blend-mode: screen;）</output>
                </div>
                <!-- 小播 -->
                <div class="hidden">
                        <label>小播元素 : </label>
                        <input name="radPlayer" type="radio" value="img" id="img" checked>
                        <label for="img">img</label>
                        <input name="radPlayer" type="radio" value="div" id="div">
                        <label for="div">div</label><br><br>
                        <label for="txtPlayer">图片地址 : </label>
                        <input id="txtPlayer" type="text" class="width1000" value=""><br><br>
                        <label for="txtPlayerPosition">小播位置 : </label>
                        <input id="txtPlayerPosition" type="text" class="width500" value="bottom: 60px;">
                        <output><span class="click" onclick="txtPlayerPosition.value='bottom: 60px;'">建议值</span><br><br>（小播位置请使用css语法设置，left、top、right、bottom 纵横方向两两配对或只设置其中一个）</output>
                </div>
                <!-- 进度条 -->
                <div class="hidden">
                        <label for="txtProg">进度条设置 : </label>
                        <input id="txtProg" type="text" class="width500" value="bottom: 40px; color: #fefefe; width: 240px;">
                        <output><span class="click" onclick="txtProg.value='bottom: 30px; color: #fefefe; width: 240px;'">建议值</span><br><br>（位置支持 left、top、right、bottom 纵横方向两两配对或只设置其中一个。可以在此设置前景色和相关内容）</output>
                </div>
                <!-- LRC歌词 -->
                <div class="hidden" id="tzLrc">
                        <label>歌词格式 : </label>
                        <input name="radLrc" type="radio" value="hc" id="hc" >
                        <label for="hc">花潮格式</label>
                        <input name="radLrc" type="radio" id="ys" value="ys" id="ys" checked>
                        <label for="ys">原生格式 | </label>
                        <input type="checkbox" name="chkLrc" id="chkLrc">
                        <label for="chkLrc">歌词淡入效果 | </label>
                        <label for="txtLrcPosition" title="点击使用建议值"><span class="click" onclick="txtLrcPosition.value='top: 30px; color: silver; --c1: white; --c2: red;'">定位+其他设置</span> : </label>
                        <input type="text" id="txtLrcPosition" class="width500" value="top: 30px;" title="可以添加:&#10;--c1: red;&#10;--c2: white;&#10;color: tan;"><br><br>
                        <label for="txtLrc">填写歌词 :（可选，有内容表示启用歌词同步，请注意歌词格式）</label>
                        <p class="txtMid"><textarea id="txtLrc" class="width1000 height300"></textarea></p>
                        <pre>【例】

① 花朝格式 ：[,,]
② 原生格式 ：歌词一\n歌词二歌词三

【注】原生格式可以使用分行代替 \n
                        </pre>
                </div>
                <!-- 全屏设置 -->
                <div class="hidden">
                        <label for="txtFs">文本颜色 : </label>
                        <input id="txtFs" type="text" value="#fefefe">
                        <output>支持多种颜色表达法，例：#eee | gray | rgb(200,100,50)</output><br><br>
                        <label for="txtFsPosition" title="点击使用建议值"><span class="click" onclick="txtFsPosition.value='left: 20px; top: 20px;'">按钮位置</span> : </label>
                        <input id="txtFsPosition" type="text" class="width500" value="left: 20px; top: 20px;"><br><br>
                        <output>（按钮位置请使用 left、right、top、bottom 纵横方向两两配套并按格式进行设置 ）</output>
                </div>
                <div class="hidden">
                        <textarea id="codeTextArea"></textarea>
                        <p>（可以完善代码再预览，所做修改切换编辑模块后代码会重置到前面的所有设置）</p>
                </div>
        </div>
</div>
<div id="showDiv"></div>

<script>
        let currentIdx = 0;
        const btns = document.querySelectorAll('#toolBar > .btnItem');
        const divs = document.querySelectorAll('#divWrap > div');

        // 初始化元素状态
        setElementState([, ]);

        // 预览按钮点击事件
        btnShow.onclick = () => preView(codeTextArea.value.trim(), showDiv);

        // 工具栏按钮事件
        btns.forEach((btn, idx) => {
                btn.onclick = () => {
                        currentIdx = idx;
                        setElementState([, ]);
                        btnShow.disabled = true;
                        if (idx === btns.length - 1) {
                                codeTextArea.value = createHtmlCode();
                                btnShow.disabled = false;
                        }
                };
        });

        // 预览
        function preView(htmlCode, targetBox) {
                if (targetBox.innerHTML) return;
                const iframe = document.createElement('iframe');
                htmlCode = htmlCode + '\n<style>body {margin: 0; }</style>\n';
                iframe.srcdoc = htmlCode;
                targetBox.appendChild(iframe);
                targetBox.style.display = 'block';
                targetBox.onclick = () => {
                        targetBox.innerHTML = '';
                  targetBox.style.display = 'none';
                }
        }

        // 元素切换状态
        function setElementState(objs) {
                objs.forEach((obj, key) => {
                        const elms = obj;
                        const className = obj;
                        elms.forEach((elm, index) => {
                                if (index === currentIdx) {
                                        elm.classList.add(className);
                                } else {
                                        elm.classList.remove(className);
                                }
                        });
                });
        }

        // 获取帖子容器设置
        function getTzSetting() {
                const ww = txtWidth.value.trim();
                const hh = txtHeight.value.trim();
                let wh = '';
                if (ww && hh) {
                        wh = ` width: ${ww}; height: ${hh}; `;
                }
                const offsetX = txtOffset.value.trim();
                const bg = txtBg.value.trim();
                const bgSet = txtBgSetting.value.trim();
                const maSize = txtMaSize.value.trim();
                let selfCss = txtSelfCss.value.trim();
                let css = '';
                if (selfCss) {
                        const lines = selfCss.split('\n');
                        lines.forEach(line => {
                                css += '\n    ' + line;
                        });
                }
                return `\<style\>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
    .pa { --offsetX: ${offsetX}; --bg: url('${bg}') ${bgSet}; --ma-size: ${maSize};${wh}}${css}
\</style\>`;
        }

        // 整理音频数据
        function getMusic() {
                return `tz.add('audio', '', '', { src: '${txtAudio.value.trim()}' })`;
        }

        // 整理视频数据
        function getVideo() {
                const src = txtVideo.value.trim();
                if (!src) return;
                const val = document.querySelector('#tzVid input:checked').value;
                let css = txtVidCSS.value.trim();
                if (css) css = `.style('${css}')`;
                return `tz.add('video', '', '${val}', {src: '${src}'})${css}`;
        }

        // 整理小播数据
        function getPlayer() {
                const radios = document.getElementsByName('radPlayer');
                let elm, opt, style;
                let pic = txtPlayer.value.trim();
                let pos = txtPlayerPosition.value.trim();
                if (radios.checked) {
                        elm = 'img';
                        opt = `src: '${pic}'`;
                        style = `.style('${pos}')`;
                } else {
                        elm = 'div';
                        opt = `style: 'background: url("${pic}") no-repeat center/cover; ${pos}'`;
                        style = '';
                }
                return `tz.add('${elm}', '', 'ma', { ${opt} })${style}.playmp3()`;
        }

        // 整理进度条数据
        function getProg() {
                return `tz.bgprog().style('${txtProg.value.trim()}')`;
        }

        // LRC歌词
        function getLrc() {
                let text = txtLrc.value.trim();
                if (!text) return '';
                let posCss = txtLrcPosition.value.trim() || '';
                const val = document.querySelector('#tzLrc input:checked').value;
                let res;
                if (val === 'ys') {
                        res = `var gc = \`${text}\`;\n    tz.lrc(tz.lrc2HC(gc), '', ${chkLrc.checked})`;
                } else {
                        res = `var gc = ${text};\n    tz.lrc(gc, '', ${chkLrc.checked})`;
                }
                if (posCss) res += `.style('${posCss}')`;
                returnres;
        }

        // 整理全屏数据
        function getFs() {
                return `tz.fs().style('${txtFsPosition.value.trim()}')`;
        }

        // 整合所有数据
        function createHtmlCode() {
                let res = `${getTzSetting()}

<div class="pa"></div>

<script type="module"\>
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';

    const tz = TZ.TZ('pa');
`;
                res += '\n    ' +
                        .filter(str => str)
                        .join(';\n    ');
                res += `\n\</script\>`;
                return res;
        }
</script>

<br><br><br><br><br>
红色部分均可点击上屏

花简静 发表于 前天 14:26

为什么叫【tzMaker音画贴子电饭煲】
一直以来代码音画都让人忘而却步，参数和各种设置纷繁复杂。
马黑黑老师出品的这款可视化在线制作音画贴小程序，
制作人直接在程序里填入“图片”“音频”“视频”“小播””歌词“等音画元素，一键生成代码，并提供预览，。
如果感觉不满意，可直接回程序修改。
音画电饭煲像是煮饭一样，材料放入后一锅炖便可出成品，极大地简化代码编辑过程。
即使完全没有代码基础，也可以轻松完成一张有动态，带小播带歌词的音画贴。

可以说，只要会复贴粘贴，就能出音乐，画面，动态，歌词俱全的音画作品。。

花简静 发表于 前天 14:26

一、认识九个按键

花简静 发表于 前天 14:26

二、认识贴子容器


三、添加音频


四、添加视频

花简静 发表于 前天 14:27

本帖最后由 花简静 于 2026-1-19 17:03 编辑

五、添加小播



六、进度条设置


七、歌词设置

花简静 发表于 前天 14:27

本帖最后由 花简静 于 2026-1-19 17:05 编辑

八、全屏按纽设置


九、生成代码和预览

花简静 发表于 前天 14:27

本帖最后由 花简静 于 2026-1-19 21:55 编辑

下面进入实战（请用给的实例进行填空）：

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（雪花）

花简静 发表于 前天 14:27

本帖最后由 花简静 于 2026-1-19 17:35 编辑

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

原生格式歌词
      单曲：我要的不是雪
        我想要的不是雪
        而是有你在身边
        少了你的世界
        再美也没有分别
        我想要的不是风
        而是你给的笑容
        现在随人潮汹涌
        而你变成一个梦
        四下无人的夜
        随着昙花一现
        你又不期而至出现我心间
        曾经你浓我浓的滴滴点点
        无情的化作思念
        暮色喧闹的街
        灯火阑珊相邂
        你说我是人海中惊鸿一瞥
        怎么只因他们的私语窃窃
        就对我假装看不见
        我想要的不是雪
        而是有你在身边
        少了你的世界
        再美也没有分别
        我想要的不是风
        而是你给的笑容
        现在随人潮汹涌
        而你变成一个梦
        我想要的不是雪
        而是有你在身边
        少了你的世界
        再美也没有分别
        我想要的不是风
        而是你给的笑容
        现在随人潮汹涌
        而你变成一个梦
       
       
花潮格式歌词：
[,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ]
       

花简静 发表于 前天 14:27

本帖最后由 花简静 于 2026-1-19 17:38 编辑

下一页看成品

花简静 发表于 前天 14:31

{:1_151:}

查看完整版本: 【马黑黑tzMaker音画贴子电饭煲】使用及说明