tzMaker 起初定位为一个小工具的ES6插件，后来工具流产、废弃，tzMaker 初稿则单独保留了下来。双节有点时间，对它做了一些修正，命名为 .a 版本，可以用来发布HTML音画帖。主要功能：

① 添加 CSS 代码，代码会放在帖子容器之前；
② 在帖子容器内添加 HTML 标签；
③ 以音频为依托，联动管理视频（若有）、CSS动画（通过 --state 变量）；
④ 支持音频播放进度显示、进度调节（可选）；
⑤ 支持全屏显示帖子（可选）；
⑥ 支持快捷键 Alt+X 控制音频播放暂停、F11 全屏切换（若启用全屏按钮）。

导入和使用 tzMaker

tzMaker 指令说明：

（一）css : 在帖子容器上方加入 <style> 标签

⊙ 语法 : tz.css('CSS代码')

⊙ 说明 :

① 若css代码需要分行写，请使用反引号 `` 替代小角引号 '' 或 "" ；
② 也可以不使用此指令，直接将CSS代码构建在帖子容器上方

（二）add : 给帖子容器添加HTML子元素

⊙ 语法 : tz.add('标签名', 'id', 'class', {属性1: '值', 属性2: '值', 属性N: '值'})

⊙ 参数说明：

① 标签名必选，例如 'div' 或 'img'；
② id 必选，但可以赋空值 '' 用以占位，也可以填入标签的id名称，例如 'player'；
③ class 必选，和 id 一样设置；
④ 键值对 {} 参数可选，根据需要可设置或不设置。

⊙ 例子 ：tz.add( 'img', '', '', { src: 'https://mysite/pic/dog.gif', alt: '', title: 'mydog' } );

（三）playmp3 : 将刚添加的元素设置为音频播放控制器

⊙ 语法 : .playmp3

⊙ 说明 : 该指令是附属指令，链式用在 add() 指令之后

⊙ 举例 : tz.add('div', 'player', '', {title: 'Alt+X'}).playmp3()

（四）bgprog : 给帖子容器添加音频播放进度条

⊙ 语法 : tz.bgprog()

⊙ 说明 : 此指令无参数（预计a以后的版本会有），约定进度条的 id="prog"，因此需要在CSS代码中存在 #prog 选择器，用以定义进度条的样式。进度条应通过标签的线性渐变背景实现，tz.bgprog() 指令为进度条标签设置CSS变量 --prg 动态值，CSS代码背景设置类似下面的语句：

#prog { background: linear-gradient( to right, red (var--prg), lightblue 0 ); }

（五）fs : 设置全屏按钮

⊙ 语法 : tz.fs()

⊙ 说明 : fs() 指令无参数。该指令约定 ① 按钮 id="btnFs"，按钮样式在CSS代码 #btnFs 选择器中自行设置，② 作用于帖子容器，点击按钮会令帖子来回在正常模式和全屏模式之间切换

其它相关说明：

① 支持 @import 导入 CSS 资源，不论是使用独立 style 标签还是使用 tz.css() 指令设置CSS样式。

② 除附属指令 playmp3() 之外，各指令的使用没有顺序要求，但应关切HTML标签的“后来者居上”的覆盖原则，确保如播放器按钮、进度条、图片等标签不被视频或其它元素覆盖，当然也可以在CSS对应选择器中设置恰当的 z-index 属性保证目标对象不被覆盖。

③ 关于指令中的 { ... } 参数，花括号里是一对一对的键值对，可以缺省、可以留空，可以只是一个键值对，如果是多个键值对，各键值对之间用小角逗号隔开，键值对顺序不讲究。另外注意：其一，键名若带有短链接符（-），应使用小角引号将键名包裹起来（否则JS视为非法键名报错）；其二，键值为字符型应当使用小角引号包裹，纯数值、布尔值则不用）。

④ 使用 tz.add() 指令添加音视频标签，tzMaker 默认设置音视频为无控制界面、自动播放、循环播放、视频静音，如有特殊需要，可额外配置 autoplay、loop、muted 等标签属性值，模块约定这些值如果为 false 才按传参设置，否则缺省时均设为自动播放、循环播放、视频静音（音频也先设为静音再恢复）。以下语句创建一个视频标签，设为显示操控界面、不自动播放、不循环播放、不静音：

tz.add('video', '', 'pd-vid', { controls: 'controls', autoplay: false, loop: false, muted: false };

⑤ tz.add() 指令第三个参数 class 支持多列表class属性值，和HTML代码一样，多个class属性名称用空格隔开。以下语句创建一个 div 标签，该标签使用三个class列表名称：

tz.add('div', '', 'txtMid txtRed bgTan');

嗯，tzMaker .a 版本极其简单，现有功能有待完善、很多功能尚未建立。敬请期待 .b 版本。