论坛首页 › 音画教程 › 马黑黑老师💠tzMaker在线制作工具（支持歌词版）

醉美水芙蓉 发表于 4 天前

马黑黑老师💠tzMaker在线制作工具（支持歌词版）

<style>
        #mum { margin: 30px 0; left: 50%; 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>

<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='81px'">81px</span>）</output>
                        <br><br>
                        <label for="txtWidth">帖子宽度 : </label>                       
                        <input type="text" value="" id="txtWidth" title="留空使用CSS默认设置，自定义需要带 px 等单位">
                        <output>（可选，例：<span class="click" onclick="txtWidth.value='1400px'">1400px</span>）</output>
                        <label for="txtHeight">帖子高度 : </label>
                        <input type="text" value="" id="txtHeight" title="可以留空，自定义记得带 px 等单位"></input>
                        <output>（可选，例：<span class="click" onclick="txtHeight.value='788px'">788px</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="12%">
                        <output>数字+单位（例如：120px | <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; }'">.vid { opacity: 0.35; }</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;）</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>

funingfu 发表于 3 天前

感谢分享，观点独特新颖

klxf 发表于 3 天前

实用，便捷，音画制作爱好者的福音，谢谢醉美管理员精彩分享

pzqyhkor 发表于 前天 13:38

肖浅 发表于 昨天 01:45

支持分享，内容超级棒呢

查看完整版本: 马黑黑老师💠tzMaker在线制作工具（支持歌词版）