套用马老师代码制作的播放器 歌曲：化蝶
本帖最后由 霜染枫丹 于 2025-11-28 15:12 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa { --offsetX: 81px; --bg: url('https://cccimg.com/view.php/be1ebf670f47a9c6569cea17c314ca86.jpg') no-repeat center/cover; }
.ball { width: 4px; height: 90px; background: linear-gradient(to bottom, tan 20%, transparent 20%, transparent 80%, tan 80%, tan 0); display: grid; place-items: center; }
.ball::before, .ball::after { position: absolute; content: ''; top: -40px; width: 20px; height: 40px; background: linear-gradient(tan, white); border-radius: 50%; }
.ball::after { top: 100%; background: linear-gradient(white, tan); }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', { src: 'https://cccimg.com/view.php/469aed7f55695e2024de5675cf10442a.m4a' });
tz.add('video', '', 'pd-vid', { src: 'https://cccimg.com/view.php/5cbe974d77ba1d9cfec7ffe6c8823396.mp4' });
tz.add('div', 'wrapper', 'wrap100 rot-ani', { style: 'cursor: pointer; right: 5%; top: 10%' }).playmp3();
tz.lzRot(4, 'wrapper', { className: 'ball', angle: 180 });
tz.add('div', 'svgwrap', 'wrap100', { style: 'right: 5%; top: 10%; clip-path: circle(25%)' });
tz.add('svg', 'msvg', '', { width: 50, height: 50 }).to('svgwrap');
tz.svgson('msvg', 'circle', { id: 'track', cx: 25, cy: 25, r: 20, fill: 'none', stroke: 'tan', 'stroke-width': 8 });
tz.svgson('msvg', 'circle', { id: 'prog', cx: 25, cy: 25, r: 20, fill: 'none', stroke: 'white', 'stroke-width': 8 });
tz.svgprog('msvg', track, prog);
tz.fs().style('left: 20px; top: 20px');
</script>
本帖最后由 霜染枫丹 于 2025-11-27 18:38 编辑
学习套用了2个播放器，相对的对简单置换似乎会用了。马老师的炸弹昨天我一打开帖子音乐一起来，我的桌子都感到震感，赶紧降低音量。
我就换了一首柔和的歌曲《化蝶》，背景照片是我自己拍摄的。 我感觉这种程度就是我的最大限度了，想把歌词加进去，几次都没成功，不是不显示就是不滚动。没基础学不会了，只好作罢。{:4_189:}
最近我是没时间弄了，感觉好麻烦。 我满屏点了无数次
没声音也不动啊
{:4_170:} 美得惊心动魄呵！我也就点一W+1个赞赞好了{:4_178:} 画儿是是自己的得意之作，歌儿也是名曲，俩俩相得益彰，于是一幅赏心悦目的大作就出笼啦{:4_172:} 大姐不是一班的，也不是二班的，而是三班的超级牛{:4_170:} 套用的很成功{:4_199:}
欣赏老师好制作 真漂亮，枫丹自己的蝴蝶儿是真，还有视频里的蝴蝶儿是幻，幻真交织，如梦似幻，太美了。
给枫丹点赞{:4_199:} 阿狄丽娜 发表于 2025-11-27 18:42
最近我是没时间弄了，感觉好麻烦。
我不会做，这样代码我每套用过。就想学习一下，马老师做的都挺好看，有诱惑力。可想能真正意义上的会用对我有点难。
谢你的支持就，晚上好！{:4_204:}
澜天 发表于 2025-11-27 21:12
我满屏点了无数次
没声音也不动啊
打开的慢。需要等{:4_189:} 樵歌 发表于 2025-11-27 21:20
美得惊心动魄呵！我也就点一W+1个赞赞好了
我喜欢拍蝴蝶。就拍了很多。感谢小樵哥的支持，晚上好！{:4_204:}
樵歌 发表于 2025-11-27 21:22
画儿是是自己的得意之作，歌儿也是名曲，俩俩相得益彰，于是一幅赏心悦目的大作就出笼啦
我计算机里有这首歌
就用可这首顶级演唱
彭丽媛唱的
{:4_204:}
小辣椒 发表于 2025-11-27 21:48
套用的很成功
欣赏老师好制作
现在就会套用，通汇贯通做不到。
谢小辣椒的支持
晚上好{:4_204:}
红影 发表于 2025-11-27 23:08
真漂亮，枫丹自己的蝴蝶儿是真，还有视频里的蝴蝶儿是幻，幻真交织，如梦似幻，太美了。
给枫丹点赞{:4_19 ...
谢谢红影，有你支持真高兴。晚上好{:4_204:}
霜染枫丹 发表于 2025-11-27 23:40
我喜欢拍蝴蝶。就拍了很多。感谢小樵哥的支持，晚上好！
简直美得不行了，感谢你的美片片，看了又看，真是艺术杰作呀{:4_204:} 霜染枫丹 发表于 2025-11-27 23:41
我计算机里有这首歌
就用可这首顶级演唱
彭老师唱得最圆润动听了，别人学不来。{:4_199:} 加歌词需要歌词与指令的配套：
① 歌词需要花朝格式的，得事先制作好；如果使用原生LRC格式的歌词，需要导入另一个模块 lrc2HC.js，然后使用函数 lrc2HC() 将原生歌词转换为花朝格式的数组；
② 使用 tz.lrc() 指令部署歌词标签。
这些，都有对应的教程，需要花点时间去熟悉一下，彻底弄过一次之后就可上手。 马黑黑 发表于 2025-11-28 08:10
加歌词需要歌词与指令的配套：
① 歌词需要花朝格式的，得事先制作好；如果使用原生LRC格式的歌词，需要 ...
谢马老师，您说的这个我懂了，前面那个就是lrc2HC的模式，我找教程看了。虽然没做出来比较好的播放器，倒是看了好几个教程，，很有收获。这一点我很高兴，如果没有马老师代码贴的诱惑，那么多好玩的，我是不在意播放器这种形式的。{:4_190:}{:4_204:}
霜染枫丹 发表于 2025-11-27 23:38
打开的慢。需要等
这会很流畅了
还有化蝶的歌
好听
页:
[1]
2