马黑黑老师tzMaker V5 高能电饭煲

醉美水芙蓉

V5高能电饭煲

帖子容器 音频 视频 小播 进度条 LRC歌词 全屏 </> 预览

帖子宽度 :

（可选，例：1400px）

帖子高度 :

（可选，例：788px）

背景图片 :

背景设置 :

背景图片是否重复、位置、尺寸等，建议值

小播尺寸 :

数字+单位（例如：120px | 12%）

自定义CSS：（可选，例：.vid { opacity: 0.35; }）

音频地址 :

（请确保音频资源有效 网页云↑）

视频来源 : 熊猫 千库 其它

视频地址 :

相关CSS :

（可以设置尺寸、透明度等，例：opacity: 0.5;）

小播元素 : img div

图片地址 :

小播位置 :

建议值

（小播位置请使用css语法设置，left、top、right、bottom 纵横方向两两配对或只设置其中一个）

进度条设置 :

建议值

（位置支持 left、top、right、bottom 纵横方向两两配对或只设置其中一个。可以在此设置前景色和相关内容）

歌词格式 : 花潮格式 原生格式 | 歌词淡入效果 | 定位+其他设置 :

填写歌词 :（可选，有内容表示启用歌词同步，请注意歌词格式）

【例】

① 花朝格式 ：[[0.36,"歌词一",7.2],[11.52,"歌词二",7.8],[21.42,"歌词三",3.0]]
② 原生格式 ：[00:12.33]歌词一\n[01:42.78]歌词二[06:50.61]歌词三

【注】原生格式可以使用分行代替 \n
			

文本颜色 :

支持多种颜色表达法，例：#eee | gray | rgb(200,100,50)

按钮位置 :

（按钮位置请使用 left、right、top、bottom 纵横方向两两配套并按格式进行设置 ）

（可以完善代码再预览，所做修改切换编辑模块后代码会重置到前面的所有设置）

醉美水芙蓉

如果做LRC歌词帖，建议歌词的变量声明也用 var 声明，放在 jsfile 变量声明的上面。另外，如果你有自己的空间，CSS和JS资源文档可以上传到自己的空间，使用时改一下CSS和JS的地址。

【附】动态加载JS文件的函数可以考虑使用 Promise 对象实现，这样可以加入出错处理，增强函数的健壮性能。

醉美水芙蓉

<style>
    @import 'https://638183.freep.cn/638183/tzmaker/tz.v5.css';
    .pa { --bg: tan url('帖子背景图片地址') no-repeat center/cover; }
</style>

<div class="pa"></div>

<script>
    var jsfile = 'https://638183.freep.cn/638183/tzmaker/tz.v5.min.js';

    loadJs(jsfile, tzInit);

    function loadJs(url, callback) {
        const 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');
        tz.add('audio', '', '', { src: '音频地址' });
        tz.add('video', '', 'pd-vid', { src: 视频地址' });
        tz.add('img', '', 'ma invert', { src: '播放器图片地址',  style: 'bottom: 65px' }).playmp3();
        tz.bgprog().style('bottom: 20px; color: aliceblue');
        tz.fs().style('right: 20px; top: 20px');
        tz.autoMid();
    }
</script>

klxf

很实用~谢谢分享马黑黑老师的tzMaker V5 高能电饭煲