异象

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/yixl.webp') no-repeat center/cover; color: lightblue; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     #msvg { position: absolute; width: 12vw; height: 12vw; top: 5%; cursor: pointer; }
   
7. </style>
   
8. 
   
9. <div id="pa" class="pa">
   
10.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/15/5e1c06cdf1cd6.mp4" autoplay loop muted></video>
    
11.     <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
    
12. </div>
    
13. 
    
14. <script>
    
15.     var options = {
    
16.         pa: '.pa',
    
17.         urls: [['https://music.163.com/song/media/outer/url?id=3313698449', '异象']],
    
18.         btns: [msvg],
    
19.     };
    
20. 
    
21.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    
22.         loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    
23.     });
    
24. 
    
25.     function tzRun() {
    
26.         var aud = new AudPlayer(options);
    
27.         var dr = _dr(msvg);
    
28.         dr.g('g1').set('class', 'rotate');
    
29.         [40, 80, 120, 160].forEach(y => {
    
30.             var c = Math.random().toString(16).substring(2, 8);
    
31.             dr.circle(0, y, 10, `#${c}`).addTo('g1').rotates(10);
    
32.         });
    
33.     }
    
34. 
    
35.     function loadJs(url, callback) {
    
36.         var script = document.createElement('script');
    
37.         script.charset = 'utf-8';
    
38.         script.src = url;
    
39.         script.onload = function() {
    
40.             if (callback) callback();
    
41.         };
    
42.         document.head.appendChild(script);
    
43.     }
    
44. </script>

复制代码

马黑黑

辅助小播设计构想：

（一）先创建 g 分组标签，id="g1" class="rotate" 属性设置（启用CSS旋转关键帧动画）；
（二）从SVG画布中心（不含中心点）向下垂直取4点作为小圆的Y坐标画圆，每个小圆间隔40px、每一个小圆取随机色填充、加入 g 分组标签；
（三）每一个小圆绘制完成后复制10份并在各自的圆周上均匀分布。

具体代码在 27~32 行。

马黑黑

音乐资料：

歌手：塞壬唱片-MSR / Adam Gubman
所属专辑：雪山降临1101 OST
作曲 : Adam Gubman
编曲 : Adam Gubman
制作人 : Adam Gubman

杨帆

好听好看，构思新颖，谢谢马老师深度分享

梦江南

黑黑老师的这个小播设计构想奇妙，颜色还会随机变化，怪不得刚打开时小播颜色有点暗，再打开就变亮了。

小辣椒

黑黑又一个精彩的源码分享

小辣椒

辅助小播设计小辣椒不会，只能用黑黑分享的了

小辣椒

发现，凡是这类播放器小辣椒加了歌词 全屏欣赏文字就会出现是乱码

马黑黑

小辣椒 发表于 2026-9-1 21:20
发现，凡是这类播放器小辣椒加了歌词 全屏欣赏文字就会出现是乱码

也不知你是怎么加歌词的。你可以考虑如下代码模板：

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('图片地址') no-repeat center/cover; color: lightblue; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     #lrc { top: 4%; }
   
7.     #msvg { position: absolute; width: 12vw; height: 12vw; top: 15%; transition: .75s; opacity: 1; }
   
8. </style>
   
9. 
   
10. <div id="pa" class="pa">
    
11.     <video class="pd-vid" src="视频地址" autoplay loop muted></video>
    
12.     <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
    
13. </div>
    
14. 
    
15. <script>
    
16.     var gc = `原生lrc歌词`;
    
17. 
    
18.     var options = {
    
19.         pa: '.pa',
    
20.         urls: [['歌曲地址', '曲名']],
    
21.         btns: [msvg],
    
22.     };
    
23. 
    
24.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    
25.         loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', function() {
    
26.             loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    
27.         });
    
28.     });
    
29. 
    
30.     function tzRun() {
    
31.         var aud = new AudPlayer(options);
    
32.         LRC(aud.pa, aud.aud, gc, 0.5);
    
33.         var dr = _dr(msvg);
    
34.         //dr指令
    
35.     }
    
36. 
    
37.     function loadJs(url, callback) {
    
38.         var script = document.createElement('script');
    
39.         script.charset = 'utf-8';
    
40.         script.src = url;
    
41.         script.onload = function() {
    
42.             if (callback) callback();
    
43.         };
    
44.         document.head.appendChild(script);
    
45.     }
    
46. </script>

复制代码

马黑黑

杨帆 发表于 2026-9-1 18:41
好听好看，构思新颖，谢谢马老师深度分享

马黑黑

小辣椒 发表于 2026-9-1 21:17
黑黑又一个精彩的源码分享

模板主体都差不多

马黑黑

梦江南 发表于 2026-9-1 18:44
黑黑老师的这个小播设计构想奇妙，颜色还会随机变化，怪不得刚打开时小播颜色有点暗，再打开就变亮了。{:4_ ...

每次刷新都不一样

马黑黑

小辣椒 发表于 2026-9-1 21:18
辅助小播设计小辣椒不会，只能用黑黑分享的了

设计逻辑应该是简洁易懂的吧

小辣椒

马黑黑 发表于 2026-9-1 21:45
也不知你是怎么加歌词的。你可以考虑如下代码模板：

要不前面那个我发出来，黑黑帮忙看看错误再那里？

红影

这个制作好美，欣赏黑黑好帖