论坛 › 音乐沙龙 › 异象

马黑黑 发表于 2026-9-1 18:14

异象

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/yixl.webp') no-repeat center/cover; color: lightblue; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #msvg { position: absolute; width: 12vw; height: 12vw; top: 5%; cursor: pointer; }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/15/5e1c06cdf1cd6.mp4" autoplay loop muted></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=3313698449', '异象']],
      btns: ,
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
      loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    });

    function tzRun() {
      var aud = new AudPlayer(options);
      var dr = _dr(msvg);
      dr.g('g1').set('class', 'rotate');
      .forEach(y => {
            var c = Math.random().toString(16).substring(2, 8);
            dr.circle(0, y, 10, `#${c}`).addTo('g1').rotates(10);
      });
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

马黑黑 发表于 2026-9-1 18:15

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/yixl.webp') no-repeat center/cover; color: lightblue; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #msvg { position: absolute; width: 12vw; height: 12vw; top: 5%; cursor: pointer; }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/15/5e1c06cdf1cd6.mp4" autoplay loop muted></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=3313698449', '异象']],
      btns: ,
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
      loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    });

    function tzRun() {
      var aud = new AudPlayer(options);
      var dr = _dr(msvg);
      dr.g('g1').set('class', 'rotate');
      .forEach(y => {
            var c = Math.random().toString(16).substring(2, 8);
            dr.circle(0, y, 10, `#${c}`).addTo('g1').rotates(10);
      });
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

马黑黑 发表于 2026-9-1 18:23

辅助小播设计构想：

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

具体代码在 27~32 行。

马黑黑 发表于 2026-9-1 18:25

音乐资料：

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

杨帆 发表于 2026-9-1 18:41

好听好看，构思新颖，谢谢马老师深度分享{:4_190:}

梦江南 发表于 2026-9-1 18:44

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

小辣椒 发表于 2026-9-1 21:17

黑黑又一个精彩的源码分享{:4_178:}

小辣椒 发表于 2026-9-1 21:18

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

小辣椒 发表于 2026-9-1 21:20

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

马黑黑 发表于 2026-9-1 21:45

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

也不知你是怎么加歌词的。你可以考虑如下代码模板：
<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('图片地址') no-repeat center/cover; color: lightblue; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #lrc { top: 4%; }
    #msvg { position: absolute; width: 12vw; height: 12vw; top: 15%; transition: .75s; opacity: 1; }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="视频地址" autoplay loop muted></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
</div>

<script>
    var gc = `原生lrc歌词`;

    var options = {
      pa: '.pa',
      urls: [['歌曲地址', '曲名']],
      btns: ,
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
      loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', function() {
            loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
      });
    });

    function tzRun() {
      var aud = new AudPlayer(options);
      LRC(aud.pa, aud.aud, gc, 0.5);
      var dr = _dr(msvg);
      //dr指令
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

马黑黑 发表于 2026-9-1 21:46

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

{:4_180:}

马黑黑 发表于 2026-9-1 21:46

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

模板主体都差不多

马黑黑 发表于 2026-9-1 21:47

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

每次刷新都不一样

马黑黑 发表于 2026-9-1 21:47

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

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

小辣椒 发表于 2026-9-1 21:51

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

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

红影 发表于 2026-9-2 00:06

这个制作好美，欣赏黑黑好帖{:4_187:}

梦江南 发表于 2026-9-2 09:53

本帖最后由 梦江南 于 2026-9-3 08:58 编辑

马黑黑 发表于 2026-9-1 21:47
每次刷新都不一样
黑黑老师早上嚎，每次刷新都不一样，很奇妙！

马黑黑 发表于 2026-9-2 22:30

梦江南 发表于 2026-9-2 09:53
黑黑老师早嚎，每次刷新都不一样，很奇妙！

JS实现的随机颜色

马黑黑 发表于 2026-9-2 22:30

红影 发表于 2026-9-2 00:06
这个制作好美，欣赏黑黑好帖

谢好

马黑黑 发表于 2026-9-2 22:30

小辣椒 发表于 2026-9-1 21:51
要不前面那个我发出来，黑黑帮忙看看错误再那里？

看到帖子了，看不到有什么问题

查看完整版本: 异象