音画帖快手源码

马黑黑 发表于 2026-3-26 12:34

基于 tz2026 插件，支持单曲、专辑制作。源码存为本地 .html 文档即可运行：
<style>
.mainBox { --xx: 0px; 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; 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; }
#previewDiv { 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; }
#previewDiv::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; }
#previewDiv 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; }
.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="previewDiv"></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; }
</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\>
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();
};
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(), previewDiv);
      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 12:45

音画帖快手和帖子V5高能电饭煲的区别：

快手基于 tz2026 插件，无 JS 制作指令，通过 HTML 代码部署帖子内部元素；

电饭煲基于 tzv5 插件，使用 JS 制作指令部署帖子内部元素。

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

音画帖快手刚刚完成，可能存在错误与不足，欢迎指正。

任何人均可修改源码，但请保留源码作者信息（代码06行）。本源码不限制用途，前提是遵纪守法。使用本源码所造成的任何意外与源码初始作者无关。

音画帖快手生成的帖子代码，使用的插件也同样可以自行修改、上传、无限制使用。

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

马黑黑发表于 2026-3-26 12:59
音画帖快手刚刚完成，可能存在错误与不足，欢迎指正。

任何人均可修改源码，但请保留源码作者信息（代码 ...

这个命名有意思，直接说出了它的作用，又一个刚完成的好东西，黑黑辛苦了{:4_187:}

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

马黑黑发表于 2026-3-26 12:45
音画帖快手和帖子V5高能电饭煲的区别：

快手基于 tz2026 插件，无 JS 制作指令，通过 HTML 代码部署帖 ...

音画帖快手基于 tz2026 插件，也就是 tz2026 的功能它全有，真好{:4_187:}

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

红影发表于 2026-3-26 14:13
这个命名有意思，直接说出了它的作用，又一个刚完成的好东西，黑黑辛苦了

小意思的意思

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

红影发表于 2026-3-26 14:16
音画帖快手基于 tz2026 插件，也就是 tz2026 的功能它全有，真好

就是针对 tz2026 插件做得Web页

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

源码已经更新，更新内容是支持音乐专辑制作

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

这个看个人习惯了，懒人应该电饭煲速度快一点，这个玩音画的人可以轻松一点，小辣椒就喜欢歌词同步的效果，电饭煲不用动脑子，直接歌词出来了{:4_170:}

红影发表于 2026-3-26 23:00

马黑黑发表于 2026-3-26 20:03
小意思的意思

这个为制作音画带来很多便利呢{:4_187:}

红影发表于 2026-3-26 23:01

马黑黑发表于 2026-3-26 20:03
就是针对 tz2026 插件做得Web页

有针对性的。

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

红影发表于 2026-3-26 23:01
有针对性的。

嗯嗯，配套的

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

红影发表于 2026-3-26 23:00
这个为制作音画带来很多便利呢

省去一些琐细的设计与操作

页: [1]

花潮论坛's Archiver

音画帖快手源码