tz2026m : 音乐专辑插件文档

马黑黑

1️⃣ tz2026m简介

tz2026m 是专辑音画帖插件，在 tz2026 基础上加入多音频管理功能、去掉LRC歌词同步模块。同时调整了部分细节的相关实现机制。

2️⃣ 导入CSS资源及相关配置

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

类选择器均为预设名称，不要更改。其中：

.p {} → 通过 --bg 变量设置背景图片。可加入其它诸如 width、height 等属性设置；

.mlist {} → 音乐有序列表，使用 ol 标签，主要设置位置，可自定义边框、背影等；

.player {} → 播放器，主要设置尺寸和定位，如果是 div 还需要配置背景图或设计其它图案；

.bgprog {} → 播放进度条，用div元素制作，这里主要做定位，可加 color 属性改变颜色；

.btfFs {} → 全屏按钮，div元素，设置定位和颜色。

3️⃣ 帖子HTML结构

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

帖子元素包裹N多子元素，帖子元素及其子元素的class属性值应与CSS类选择器相配套。子元素中：

audio → 音频标签，必须，使用极简的标签代码即可；

video → 视频标签，可选，类属性可选 pd-vid、qk-vid、vid，后者为常规样式。

ol → 音乐列表标签，ol 为有序列表，如果想用无序列表，请使用 ul 替代 ol；

img → 小播标签，必须，可以使用 div 替换（参照前面CSS部分的说明）。class属性必须有 player 类名，例中的里一个类名 rotate 是旋转选择器，可用另一个叫 rot 的代替，也可以使用自定义的动画类名代替；

div class="bgprog" → 进度条。如果使用 svg 进度条，请将此标签删掉；

div class="btnFs → 全屏按钮。

【注】HTML代码可以加入其它任何元素，所加入的元素若希望参与CSS动画管控序列，请在对应选择器CSS动画属性（animation）末尾使用 var(--state) 语句。

4️⃣ JS代码

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

JS代码结构已经固化好结构，要做的事情仅是按照格式填写好 musics 数组变量即音频地址、音乐名。当然，JS代码可以加入自己需要的任何东东——只要不破原有的部分。

5️⃣ 其他说明

• 若希望使用 SVG 做进度条，请参阅 tz2026文档 相关说明。
• 当前的 CSS 样式表和 tz2026m 插件均为压缩，可下载保存为自己的文档进行修改、上传到自己的空间使用。
• 当音频列表很长，应设置 .mlist 选择器的最大高度或（和）高度，并用 overflow 属性设置滚动条。
• 未尽事宜欢迎留言讨论。

马黑黑

演示帖：留声音乐 - 音乐沙龙 - 花潮论坛 - Powered by Discuz!

杨帆

祝贺马老师盛情推出tz2026m : 音乐专辑插件文档

谢谢马老师的经典讲授与精彩演示，从此做音乐专辑更便捷了