雨洛
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa {--offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/yl.jpg') no-repeat center/cover;}
</style>
<div class="pa">
<div id="player" class="wrap200" style="right: 20px; bottom: 20px">
<svg id="msvg" width="200" height="200">
<path id="track" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightblue" stroke-width="8" />
<path id="prog" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightgreen" stroke-width="8" />
</svg>
</div>
</div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1911835887'});
tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2418175/01/29/76/62a7571a73dc2.mp4'});
tz.add('img', '', 'rot-ani', {
src: 'https://638183.freep.cn/638183/small/2025/2501.webp',
alt: '',
style: 'width: 160px; clic-path: circle(40%); cursor: pointer'
}).playmp3().to('player');
tz.svgprog('msvg', 'track', 'prog');
tz.fs().style('left: 20px; bottom: 20px; color: lightblue');
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa {--offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/yl.jpg') no-repeat center/cover;}
</style>
<div class="pa">
<div id="player" class="wrap200" style="right: 20px; bottom: 20px">
<svg id="msvg" width="200" height="200">
<path id="track" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightblue" stroke-width="8" />
<path id="prog" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightgreen" stroke-width="8" />
</svg>
</div>
</div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=1911835887'});
tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/2418175/01/29/76/62a7571a73dc2.mp4'});
tz.add('img', '', 'rot-ani', {
src: 'https://638183.freep.cn/638183/small/2025/2501.webp',
alt: '',
style: 'width: 160px; clic-path: circle(40%); cursor: pointer'
}).playmp3().to('player');
tz.svgprog('msvg', 'track', 'prog');
tz.fs().style('left: 20px; bottom: 20px; color: lightblue');
</script>
帖子主要演示在已有父元素基础上实现播放器系列功能：播放控制器的加入、进度条的加入。
已有父元素：一，id="palyer" 的 div，二，id="msvg" 的 svg。svg 已经将进度条绘制好。
小播的容器已经存在，所以，创建小播时，使用 to 链式指令，具体代码在第 25 行。to(id) 指令的参数是容器的 id。
而进度条所在的 svg 本就在 id="player" 的 div 里面，只需通过 id 配置 svgprog() 指令即可，具体代码在第 26 行。 这个下雨效果真好看！{:4_199:} 这个下雨效果真好看！{:4_199:} 黑黑老师还分享了代码，真好！空了来套用{:4_173:} 谢谢无私奉献的黑黑老师，分享辛苦了！{:4_190:} 清茶煮雪 发表于 2025-12-5 21:24
这个下雨效果真好看！
视频效果 清茶煮雪 发表于 2025-12-5 21:24
这个下雨效果真好看！
重要的话要说三遍 清茶煮雪 发表于 2025-12-5 21:25
谢谢无私奉献的黑黑老师，分享辛苦了！
奉献说大了，玩玩，相互学习交流 马黑黑 发表于 2025-12-5 21:26
重要的话要说三遍
可能是网络原因，评论弹出相同的两个{:4_173:}，这会手机看的，下次电脑上来欣赏～ 马黑黑 发表于 2025-12-5 21:26
奉献说大了，玩玩，相互学习交流
代码编辑很费精力的，您为大家提供了这么多漂亮可直接套用的代码，这就是无私精神值得大家尊重。 谢谢马老师精彩示范与演示~{:4_176:}
在已有父元素基础上实现播放控制器的加入、进度条的加入，使得 TZ功能日趋完善
在未增加脚本（JS）体量的同时，使得HTML 结构更加丰满，也增强了制帖的自主性、扩展性与灵活性 清茶煮雪 发表于 2025-12-5 21:29
可能是网络原因，评论弹出相同的两个，这会手机看的，下次电脑上来欣赏～
貌似论坛今天的网速不太好 这个播放器也是有进度条的，黑黑现在出图速度真快，，每天都有新产品出来{:4_199:} 杨帆 发表于 2025-12-5 21:44
谢谢马老师精彩示范与演示~
在已有父元素基础上实现播放控制器的加入、进度条的加入，使得 TZ ...
这个 to 指令早有的，应该是第一个版本就有 马黑黑 发表于 2025-12-5 21:20
帖子主要演示在已有父元素基础上实现播放器系列功能：播放控制器的加入、进度条的加入。
已有父元素：一 ...
要记住这些备注{:4_189:} 清茶煮雪 发表于 2025-12-5 21:31
代码编辑很费精力的，您为大家提供了这么多漂亮可直接套用的代码，这就是无私精神值得大家尊重。
言重了，玩玩而已 小辣椒 发表于 2025-12-5 22:09
这个播放器也是有进度条的，黑黑现在出图速度真快，，每天都有新产品出来
喝完酒玩玩，没啥快不快 小辣椒 发表于 2025-12-5 22:10
要记住这些备注
一个简单的 to 指令而已。tzMaker 模块玩法很灵活的