论坛首页 › 音画教程 › 马黑黑老师《音画帖快手》

醉美水芙蓉 发表于 4 天前

马黑黑老师《音画帖快手》

<style>
.mainBox { --xx: 81px; margin: 30px 0; left: calc(50% - var(--xx)); transform: translateX(-50%); width: 98vw; height: 86vh; background: white; color: black; padding: 0 20px; border-radius: 8px; box-sizing: border-box; display: flex; flex-direction: row; gap: 5px; z-index: 666; position: relative; }
.item { flex-grow: 1; box-sizing: border-box; padding: 10px; display: flex; gap: 10px; flex-direction: column;}
.item div { flex-grow: 0; font-size: 18px; display: flex; gap: 10px; }
.item div:nth-of-type(2) { flex-grow: 2; background: #ccc; }
.item div:nth-of-type(2) textarea { flex-grow: 1; box-sizing: border-box; resize: none; overflow: auto; padding: 10px; font: normal 16px/1.2 monospace; background: beige; color: black; }
.mainBox button { outline: none; border: none; box-shadow: 0 0 2px gray; border-radius: 16px; padding: 6px 20px; }
.mainBox button:hover { color: red; box-shadow: 1px 1px 8px gray; }
#previewBox { 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; }
#previewBox::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; }
#previewBox iframe { position: relative; width: 100%; height: 100%; border: none; outline: none; box-sizing: border-box; margin: 0; }
#copyMsg { position: fixed; top: 50%; right: 50%; background: #333; color: #fff; padding: 10px 15px; border-radius: 4px; opacity: 0; display: none; transition: opacity 0.3s; }
.wrapper { position: absolute; transform: translate(0, -30px); border-radius: 8px 8px 0 0; background: white; padding: 5px 16px 5px 8px; }
.grow2 { flex-grow: 2; }
.tMid { text-align: center; }

</style>

<h2 class="tMid">音画帖快手</h2>
<div class="mainBox">
<div class="wrapper" title="点击切换单曲/专辑&#10注意：代码会重置！">
    <input type="checkbox" id="mMusic" name="mMusic">
    <label for="mMusic" >专辑</label>
</div>
<div class="item">
    <div><span>CSS代码</span></div>
    <div><textarea></textarea></div>
    <div>
      <button value="0">重置CSS代码</button>
    </div>
</div>
<div class="item">
    <div>html代码</div>
    <div><textarea></textarea></div>
    <div>
      <button value="1">重置HTML代码</button>
    </div>
</div>
<div class="item">
    <div>
      <span>JS代码</span>
      <span class="grow2"></span>
      <button value="3">预览帖子效果</button>
    </div>
    <div><textarea></textarea></div>
    <div>
      <button value="2">重置JS代码</button>
      <span class="grow2"></span>
      <button value="4">复制帖子代码</button>
    </div>
</div>
</div>
<div id="previewBox"></div>
<div id="copyMsg">showToast</div>

<script>
const tzBasicCodes = [`<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
.pa { --bg: url('背景图片') no-repeat center/cover; }
.player { bottom: 50px; width: 120px; height: 120px; }
.bgprog { bottom: 20px; }
.btnFs { left: 30px; top: 30px; color: lightblue; }
/* .lrc { top: 30px; } */
</style>`,
`<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=歌曲ID" autoplay loop></audio>
<!--<video class="pd-vid" src="熊猫视频" autoplay loop muted></video>-->
<!--<div class="lrc">LRC</div>-->
<img src="小播图片" class="player rotate" title="Alt+X" alt="">
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>`,
`\<script\>
/* lrc歌词同步
var gc = \`
歌词
歌词\`;
*/
loadJs('https://638183.freep.cn/638183/tzmaker/tz2026.min.js');

function loadJs(url, callback) {
    const script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.defer = true;
    script.onload = () => {
      var tz = TZ('pa');
      tz.start(); // tz.start(gc);
    };
    document.head.appendChild(script);
}
\</script\>`];

const mtzBasicCodes = [`<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026m.css';
.pa { --bg: url('背景图片') no-repeat center/cover; }
.mlist { left: 30px; top: 20px; }
.player { bottom: 50px; }
.bgprog { bottom: 20px; }
.btnFs { right: 30px; top: 30px; color: lightblue; }
</style>`,
`<div class="pa">
<audio></audio>
<!--<video class="pd-vid" src="熊猫视频" autoplay loop muted></video>-->
<ol class="mlist"></ol>
<img class="player rotate" title="Alt+X" alt="">
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>`,
`\<script\>
var musics = [
    ['https://music.163.com/song/media/outer/url?id=歌曲ID', '曲名'],
    ['https://music.163.com/song/media/outer/url?id=歌曲ID', '曲名'],
];

loadJs('https://638183.freep.cn/638183/tzmaker/tz2026m.js', tzInit);

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.defer = true;
    script.onload = callback;
    document.head.appendChild(script);
}

function tzInit() {
    var tz = TZ('pa', musics);
    tz.start();
}
\</script\>`];
</script>

<script>
const btns = document.querySelectorAll('.mainBox button');
const tboxes = document.querySelectorAll('.mainBox textarea');
const mMusic = document.getElementById('mMusic');
let codeAr = [];

// 按钮单击函数
function handleBtnClick(ar) {
    btns.forEach(btn => btn.onclick = () => {
      switch (btn.value) {
      // 重置代码
      case "0":
      case "1":
      case "2":
          const k = btn.value * 1;
          tboxes.value = ar;
          tboxes.focus();
          break;
      // 预览
      case "3":
          preView(getCodes(), previewBox);
          break;
      // 复制代码
      default:
          xCopy(getCodes());
      }
    });
}

// 预览
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 getCodes() {
    return tboxes.value.trim() + '\n\n' + tboxes.value.trim() + '\n\n' + tboxes.value.trim() + '\n';
}

// 复制
function xCopy(content) {
    if (!content) return;
    if (navigator.clipboard && window.isSecureContext) {
      return navigator.clipboard.writeText(content)
      .then(() => {
          showToast('复制成功');
      })
      .catch(err => {
          console.error('复制失败:', err);
          showToast('复制失败');
      });
    } else {
      return new Promise((resolve) => {
      let successful = false;
      const body = document.body;
      if (!body) {
          showToast('复制失败');
          resolve(false);
          return;
      }
      const textarea = document.createElement('textarea');
      textarea.style.position = 'fixed';
      textarea.style.opacity = '0';
      textarea.value = content;
      body.appendChild(textarea);
      textarea.select();
      try {
          successful = document.execCommand('copy');
      } catch (err) {
          successful = false;
      }
      body.removeChild(textarea);
      if (successful) {
          showToast('复制成功');
          resolve(true);
      } else {
          console.error('execCommand 复制失败');
          showToast('复制失败');
          resolve(false);
      }
      });
    }
}

// 复制交互
function showToast(message, duration = 2000) {
    const toast = document.getElementById('copyMsg');
    toast.textContent = message;
    toast.style.display = 'block';
    toast.style.opacity = '1';
    clearTimeout(toast.timeout);
    toast.timeout = setTimeout(() => {
      toast.style.display = 'none';
      toast.style.opacity = '0';
    }, duration);
}

// 单曲或专辑
function selectCode() {
    codeAr = mMusic.checked ? mtzBasicCodes : tzBasicCodes;
    tboxes.forEach((tbox, k) => tbox.value = codeAr);
}

// 专辑复选按钮
mMusic.onclick = () => selectCode();

//初始化页面
selectCode();
handleBtnClick(codeAr);
</script>

醉美水芙蓉 发表于 4 天前

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2543353">
音画帖快手 基于 tz2026.js 插件，使用它将生成可在线预览效果的音画帖，支持一件复制音画帖代码。<br />
<br />
音画帖源码已另发帖公布。<br />
<br />
使用方法：<br />
<br />
在一楼，音画帖代码结构分为三部分：<br />
<br />
其一，CSS代码。需要在原始代码中修改几个地方，例如 .pa 的背景图片、.* 的位置、颜色等。可以加入自己需要的选择器（并在HTML代码结构中加入对应的标签）；<br />
<br />
其二，HTML代码。这里的标签无法就是音频、视频、小播、进度条、全屏按钮等，可能对应于CSS相关选择器。可根据设计自行插入其它必要的标签；<br />
<br />
其三，JS代码。这里的代码结构基本不用改变，除非需要加入帖子的其它实现机制。<br />
<br />
预览帖子效果前应事先在上述三部分做完所有该做的工作，如果效果满意，可点击“复制帖子代码”按钮拿到帖子代码。<br />
<br />
【附·说明】tz2026.js 插件生成的帖子代码自适应居中，之前介绍过的。<br />
<br />

<br />
<br />
<strong>2026/3/27补充：关于代码框中的注释代码</strong><br />
<br />
（一）CSS代码中有一行，<font style="background-color:mediumturquoise"> /* .lrc { top: 30px; } */ </font>，这是为做LRC歌词同步帖准备，若制作的是歌词同步帖，请把注释打开，即将 <font style="background-color:mediumturquoise"> /* </font> 和 <font style="background-color:mediumturquoise"> */ </font> 都删掉。如果做无歌词同步帖，整句删掉；<br />
<br />
（二）HTML代码有两行，一行是视频标签，另一行是LRC歌词标签，视情况解开注释或删掉。HTML注释结构为 <font style="background-color:mediumturquoise"> &lt;!-- 被注释的内容 --&gt; </font> ，将头尾的 <font style="background-color:mediumturquoise"> &lt;!-- </font> 和 <font style="background-color:mediumturquoise"> --&gt; </font> 删掉即解开注释。不使用视频标签或LRC歌词标签的删掉整句；<br />
<br />
（三）JS代码有两成注释，都针对 LRC歌词同步：第一处是多行注释，解开注释的方式参考（一）所描述的方法；第二处是 <font style="background-color:mediumturquoise"> // tz.start(gc); </font> ，解开注释的方法是把把它前面的代码删掉，把注释前缀 <font style="background-color:mediumturquoise"> \\ </font> 符号删掉。如果不是发歌词帖，两处注释代码单元整体删掉。<br />
<br />

<br />
</td></tr></table>

daozhichuangli 发表于 3 天前

分享很精彩，点赞表心意

玖月 发表于 3 天前

感谢分享，增长知识见识

klxf 发表于 3 天前

很实用，谢谢醉美管理员精彩分享

esegolusy 发表于 前天 03:30

分享超棒，点赞支持呀

zuijiazhiliao 发表于 前天 15:55

看帖子的要发表下看法

醉美水芙蓉 发表于 前天 20:16

klxf 发表于 2026-3-28 22:02
很实用，谢谢醉美管理员精彩分享

谢谢友友光临！

daozhichuangli 发表于 昨天 03:56

感谢分享，观点独特新颖

weijianzuokong 发表于 昨天 18:53

赞，顶帖超有启发价值

查看完整版本: 马黑黑老师《音画帖快手》