论坛 › 马黑黑教程专版 › 音画帖快手

马黑黑 发表于 2026-3-26 13:06

音画帖快手

<style>
.mainBox { --xx: 81px; margin: 30px 0; left: calc(50% - var(--xx)); transform: translateX(-50%); width: 98vw; height: 90vh; background: white; padding: 0 20px; 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 1px white; border-radius: 16px; padding: 6px 20px; }
.mainBox button:hover { color: red; box-shadow: 1px 1px 6px aliceblue; }
#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); background: white; padding: 5px 10px; }
.grow2 { flex-grow: 2; }
</style>

<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>

马黑黑 发表于 2026-3-26 13:17

音画帖快手 基于 tz2026.js 插件，使用它将生成可在线预览效果的音画帖，支持一件复制音画帖代码。

音画帖源码已另发帖公布。

使用方法：

在一楼，音画帖代码结构分为三部分：

其一，CSS代码。需要在原始代码中修改几个地方，例如 .pa 的背景图片、.* 的位置、颜色等。可以加入自己需要的选择器（并在HTML代码结构中加入对应的标签）；

其二，HTML代码。这里的标签无法就是音频、视频、小播、进度条、全屏按钮等，可能对应于CSS相关选择器。可根据设计自行插入其它必要的标签；

其三，JS代码。这里的代码结构基本不用改变，除非需要加入帖子的其它实现机制。

预览帖子效果前应事先在上述三部分做完所有该做的工作，如果效果满意，可点击“复制帖子代码”按钮拿到帖子代码。

【附·说明】tz2026.js 插件生成的帖子代码自适应居中，之前介绍过的。

红影 发表于 2026-3-26 14:39

可以在线制作还能直接预览，这个音画帖快手太好了{:4_199:}
感谢黑黑送来的做帖福利{:4_187:}

无名 发表于 2026-3-26 15:10

老谟深虑 发表于 2026-3-26 19:14

          谢谢老师的音画贴快手介绍，学习了。

马黑黑 发表于 2026-3-26 19:59

老谟深虑 发表于 2026-3-26 19:14
谢谢老师的音画贴快手介绍，学习了。

{:4_191:}

马黑黑 发表于 2026-3-26 20:01

红影 发表于 2026-3-26 14:39
可以在线制作还能直接预览，这个音画帖快手太好了
感谢黑黑送来的做帖福利

晚饭后做了更新：支持专辑

马黑黑 发表于 2026-3-26 20:01

无名 发表于 2026-3-26 15:10


欢迎指正

小辣椒 发表于 2026-3-26 20:50

马黑黑 发表于 2026-3-26 13:17
音画帖快手 基于 tz2026.js 插件，使用它将生成可在线预览效果的音画帖，支持一件复制音画帖代码。

音画 ...

原来效果很齐全的{:4_178:}

杨帆 发表于 2026-3-26 21:46

不只是音画帖制作的快手，还是能手与高手，马老师您辛苦了{:4_176:}

太厉害了~终于实现了音画帖制作的可视化，如果可在线预览的话{:4_176:}

红影 发表于 2026-3-26 22:58

马黑黑 发表于 2026-3-26 20:01
晚饭后做了更新：支持专辑

音画快手能做的事更多了{:4_187:}

马黑黑 发表于 2026-3-26 23:24

红影 发表于 2026-3-26 22:58
音画快手能做的事更多了

方便了不少

lrc 方面还不够友好，有空在加一点带注释的代码

马黑黑 发表于 2026-3-26 23:30

杨帆 发表于 2026-3-26 21:46
不只是音画帖制作的快手，还是能手与高手，马老师您辛苦了

太厉害了~终于实现了音画帖制作的可 ...

这个仍然是需要处理代码的，只不过是更方便

杨帆 发表于 2026-3-27 10:32

本帖最后由 杨帆 于 2026-3-27 10:33 编辑

马黑黑 发表于 2026-3-26 23:30
这个仍然是需要处理代码的，只不过是更方便
便捷性、扩展性、可视性兼备，挺好{:4_191:}

杨帆 发表于 2026-3-27 12:27

马黑黑 发表于 2026-3-26 13:17
音画帖快手 基于 tz2026.js 插件，使用它将生成可在线预览效果的音画帖，支持一件复制音画帖代码。

音画 ...
谢谢马老师再创新品~咋无预览效果呢？

马黑黑 发表于 2026-3-27 12:51

杨帆 发表于 2026-3-27 12:27
谢谢马老师再创新品~咋无预览效果呢？

感谢提醒。

原因是一楼源码使用了一个 #previewDiv 选择器，与 Discuz 论坛模版中的一个元素同名，导致JS运行时出错。已经将 previewDiv 更改为别的，现在可以预览了。

马黑黑 发表于 2026-3-27 12:53

杨帆 发表于 2026-3-27 10:32
便捷性、扩展性、可视性兼备，挺好

感谢支持

查看完整版本: 音画帖快手