tz2026m : 音乐专辑插件文档
<style>.artBox { font: normal 18px/1.2 sans-serif; position: relative; }
.artBox p { margin: 10px 0; }
.artBox h1, .artBox h2 { margin: 4px 0; }
.artBox code, .artBox pre { background: rgba(0,128,128,.25); padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { padding: 0; background: none; }
.artBox blockquote { margin: 10px 20px; padding: 2px 15px; border-left: 3px solid skyblue; background: rgba(240,248,255,.65); }
</style>
<div class="artBox">
<h2>1️⃣ tz2026m简介</h2>
<p>tz2026m 是专辑音画帖插件，在 tz2026 基础上加入多音频管理功能、去掉LRC歌词同步模块。同时调整了部分细节的相关实现机制。</p>
<h2>2️⃣ 导入CSS资源及相关配置</h2>
<pre><code><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; width: 120px; height: 120px; }
.bgprog { bottom: 20px; }
.btnFs { right: 30px; top: 30px; color: lightblue; }
</style></code></pre>
<p>类选择器均为预设名称，不要更改。其中：</p>
<blockquote>
<p>
<code>.p {}</code> → 通过 --bg 变量设置背景图片。可加入其它诸如 width、height 等属性设置；
</p>
<p>
<code>.mlist {}</code> → 音乐有序列表，使用 ol 标签，主要设置位置，可自定义边框、背影等；
</p>
<p>
<code>.player {}</code> → 播放器，主要设置尺寸和定位，如果是 div 还需要配置背景图或设计其它图案；
</p>
<p>
<code>.bgprog {}</code> → 播放进度条，用div元素制作，这里主要做定位，可加 color 属性改变颜色；
</p>
<p>
<code>.btfFs {}</code> → 全屏按钮，div元素，设置定位和颜色。
</p>
</blockquote>
<h2>3️⃣ 帖子HTML结构</h2>
<pre><code><div class="pa">
<audio></audio>
<video class="pd-vid" src="视频地址" autoplay loop muted></video>
<ol class="mlist"></ol>
<img class="player rotate" src="小播图片" title="Alt+X"></div>
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div></code></pre>
<p>帖子元素包裹N多子元素，帖子元素及其子元素的class属性值应与CSS类选择器相配套。子元素中：</p>
<blockquote>
<p>
<code>audio</code> → 音频标签，必须，使用极简的标签代码即可；
</p>
<p>
<code>video</code> → 视频标签，可选，类属性可选 pd-vid、qk-vid、vid，后者为常规样式。
</p>
<p>
<code>ol</code> → 音乐列表标签，ol 为有序列表，如果想用无序列表，请使用 ul 替代 ol；
</p>
<p>
<code>img</code> → 小播标签，必须，可以使用 div 替换（参照前面CSS部分的说明）。class属性必须有 player 类名，例中的里一个类名 rotate 是旋转选择器，可用另一个叫 rot 的代替，也可以使用自定义的动画类名代替；
</p>
<p>
<code>div class="bgprog"</code> → 进度条。如果使用 svg 进度条，请将此标签删掉；
</p>
<p>
<code>div class="btnFs</code> → 全屏按钮。
</p>
</blockquote>
<p>【注】HTML代码可以加入其它任何元素，所加入的元素若希望参与CSS动画管控序列，请在对应选择器CSS动画属性（animation）末尾使用 var(--state) 语句。</p>
<p>4️⃣ JS代码</p>
<pre><code><script>
var musics = [
['音频地址1', '音乐名1'],
['音频地址2', '音乐名2'],
['音频地址3', '音乐名3'],
['音频地址4', '音乐名4'],
];
var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz2026m.js';
loadJs(jsFile, 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></code></pre>
<p>JS代码结构已经固化好结构，要做的事情仅是按照格式填写好 musics 数组变量即音频地址、音乐名。当然，JS代码可以加入自己需要的任何东东——只要不破原有的部分。</p>
<p>5️⃣ 其他说明</p>
<ul>
<li>若希望使用 SVG 做进度条，请参阅
<a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=91238&highlight=tz2026" title="点击访问">tz2026文档</a> 相关说明。
</li>
<li>当前的 CSS 样式表和 tz2026m 插件均为压缩，可下载保存为自己的文档进行修改、上传到自己的空间使用。</li>
<li>当音频列表很长，应设置 .mlist 选择器的最大高度或（和）高度，并用 overflow 属性设置滚动条。</li>
<li>未尽事宜欢迎留言讨论。</li>
</ul>
</div> 演示帖：留声音乐 - 音乐沙龙 - 花潮论坛 - Powered by Discuz!
祝贺马老师盛情推出tz2026m : 音乐专辑插件文档{:4_199:}
谢谢马老师的经典讲授与精彩演示，从此做音乐专辑更便捷了{:4_190:} tz2026m 专辑音画帖插件，又是个实用插件，做专辑方便了{:4_187:} 感谢黑黑的奉献，给大家带来了这么多好东西，让做帖变得越来越方便了{:4_199:} 红影 发表于 2026-3-15 17:16
感谢黑黑的奉献，给大家带来了这么多好东西，让做帖变得越来越方便了
奉献谈不上，空闲时玩玩 红影 发表于 2026-3-15 17:04
tz2026m 专辑音画帖插件，又是个实用插件，做专辑方便了
相比之前的系列插件，这个可能有一定的先进性吧，但这一切，都是建立在之前的基础之上 杨帆 发表于 2026-3-15 13:36
祝贺马老师盛情推出tz2026m : 音乐专辑插件文档
谢谢马老师的经典讲授与精彩演示，从此做音乐 ...
如果看了文档能够使用，那很令人振奋。如果还能加以扩展，或对源码进行需求性修改，那就更厉害了 马黑黑 发表于 2026-3-15 20:06
如果看了文档能够使用，那很令人振奋。如果还能加以扩展，或对源码进行需求性修改，那就更厉害了
是啊，使用相对容易，欲进行需求性扩展、修改就难了{:4_173:} 马黑黑 发表于 2026-3-15 20:03
奉献谈不上，空闲时玩玩
你玩的都是高级的，很赞{:4_187:} 马黑黑 发表于 2026-3-15 20:05
相比之前的系列插件，这个可能有一定的先进性吧，但这一切，都是建立在之前的基础之上
在之前的基础之上，越做越精妙了{:4_199:} 红影 发表于 2026-3-15 23:13
在之前的基础之上，越做越精妙了
一般来说经验总是叠加的 红影 发表于 2026-3-15 23:13
你玩的都是高级的，很赞
业余爱好 杨帆 发表于 2026-3-15 20:39
是啊，使用相对容易，欲进行需求性扩展、修改就难了
这个要动手，单看看是没啥用的 马黑黑 发表于 2026-3-16 13:42
这个要动手，单看看是没啥用的
是，理论与实践相结合，动手很重要{:4_191:} 杨帆 发表于 2026-3-16 13:52
是，理论与实践相结合，动手很重要
正确 马黑黑 发表于 2026-3-16 13:41
一般来说经验总是叠加的
优化也是越来越完善的{:4_187:} 马黑黑 发表于 2026-3-16 13:42
业余爱好
非常高级的爱好{:4_187:} 红影 发表于 2026-3-18 11:30
非常高级的爱好
养猪更高雅 红影 发表于 2026-3-18 11:29
优化也是越来越完善的
希望如此