马黑黑 发表于 2026-6-4 12:40

相变临界OST

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/xb.webp') no-repeat center/cover; color: lightgreen; }
    .player { top: 20px; right: 20px; }
    #lrc { bottom: 60px; }
    .btnFs { top: 25px; left: 20px; }
    #msvg { position: absolute; width: 12vw; heighht: 12vw; transition: .75s; opacity: var(--opacity); }
</style>

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

<script>
    var options = {
      pa: '.pa',
      urls: [
              ['https://music.163.com/song/media/outer/url?id=3376593422', 'Дом'],
                        ['https://music.163.com/song/media/outer/url?id=3376594026', '破缺对称'],
                        ['https://music.163.com/song/media/outer/url?id=3376593423', '祭祷'],
                        ['https://music.163.com/song/media/outer/url?id=3376594027', '协议空间'],
                        ['https://music.163.com/song/media/outer/url?id=3376593424', '“诺言”'],
                        ['https://music.163.com/song/media/outer/url?id=3376594028','厨房对话'],
                        ['https://music.163.com/song/media/outer/url?id=3376593425', '永恒之春']
      ],
      btns:
    };

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

    function tzRun() {
      var aud = new AudPlayer(options);
      var dr = _dr(msvg);
      var points = dr.sun(15, 200, 190);
                dr.polygon(points, 'lightgreen').set('fill-rule', 'evenodd').addTo('g1');
    }

    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-6-4 12:45

帖子代码
<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/xb.webp') no-repeat center/cover; color: lightgreen; }
    .player { top: 20px; right: 20px; }
    #lrc { bottom: 60px; }
    .btnFs { top: 25px; left: 20px; }
    #msvg { position: absolute; width: 12vw; heighht: 12vw; transition: .75s; opacity: var(--opacity); }
</style>

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

<script>
    var options = {
      pa: '.pa',
      urls: [
            ['https://music.163.com/song/media/outer/url?id=3376593422', 'Дом'],
            ['https://music.163.com/song/media/outer/url?id=3376594026', '破缺对称'],
            ['https://music.163.com/song/media/outer/url?id=3376593423', '祭祷'],
            ['https://music.163.com/song/media/outer/url?id=3376594027', '协议空间'],
            ['https://music.163.com/song/media/outer/url?id=3376593424', '“诺言”'],
            ['https://music.163.com/song/media/outer/url?id=3376594028','厨房对话'],
            ['https://music.163.com/song/media/outer/url?id=3376593425', '永恒之春']
      ],
      btns:
    };

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

    function tzRun() {
      var aud = new AudPlayer(options);
      var dr = _dr(msvg);
      var points = dr.sun(15, 200, 190);
      dr.polygon(points, 'lightgreen').set('fill-rule', 'evenodd').addTo('g1');
    }

    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-6-4 20:36

这七首音乐都很奇妙，列表设计也很漂亮，和背景十分相符{:4_199:}

红影 发表于 2026-6-4 20:39

左右箭头就是切换音乐的呢，列表的小三角点开，则鼠标浮动时也是点开的状态呢。
这个很有点科幻味道呢{:4_187:}

小辣椒 发表于 2026-6-4 22:11

多歌曲播放器{:4_199:}

拉条还可以这样设置{:4_178:}

小辣椒 发表于 2026-6-4 22:12

欣赏黑黑精彩制作{:4_187:}

杨帆 发表于 2026-6-4 22:18

新颖别致，匠心之作，谢谢马老师精彩示范{:4_190:}

马黑黑 发表于 2026-6-4 22:47

杨帆 发表于 2026-6-4 22:18
新颖别致，匠心之作，谢谢马老师精彩示范

{:4_180:}

马黑黑 发表于 2026-6-4 22:47

小辣椒 发表于 2026-6-4 22:12
欣赏黑黑精彩制作

{:4_180:}

马黑黑 发表于 2026-6-4 22:47

小辣椒 发表于 2026-6-4 22:11
多歌曲播放器

拉条还可以这样设置

没什么不可以的吧

马黑黑 发表于 2026-6-4 22:48

红影 发表于 2026-6-4 20:39
左右箭头就是切换音乐的呢，列表的小三角点开，则鼠标浮动时也是点开的状态呢。
这个很有点科幻味道呢{:4_ ...

这些功能都是 audioplayer 第一稿的时候就有的，今天知识修复了一些 bugs、更换了歌曲列表滚动机制

马黑黑 发表于 2026-6-4 22:49

红影 发表于 2026-6-4 20:36
这七首音乐都很奇妙，列表设计也很漂亮，和背景十分相符

歌曲是很特殊的吧，知识不怎么被认可

霜染枫丹 发表于 2026-6-4 23:31

马老师一晚上好！这个很新颖，我想做成分段图文应该很适合，这样就能延展情节也不显得冗长，收藏了，感谢分享！{:4_204:}{:4_190:}

马黑黑 发表于 2026-6-5 12:22

霜染枫丹 发表于 2026-6-4 23:31
马老师一晚上好！这个很新颖，我想做成分段图文应该很适合，这样就能延展情节也不显得冗长，收藏了，感谢分 ...

{:4_180:}

小辣椒 发表于 2026-6-5 22:03

马黑黑 发表于 2026-6-4 22:47
没什么不可以的吧

那到是，黑黑确实可以实现许多别人做不到的

马黑黑 发表于 2026-6-5 23:53

小辣椒 发表于 2026-6-5 22:03
那到是，黑黑确实可以实现许多别人做不到的

果酱果酱

红影 发表于 2026-6-6 19:55

马黑黑 发表于 2026-6-4 22:48
这些功能都是 audioplayer 第一稿的时候就有的，今天知识修复了一些 bugs、更换了歌曲列表滚动机制

这个最新的制作非常漂亮{:4_187:}

红影 发表于 2026-6-6 19:56

马黑黑 发表于 2026-6-4 22:49
歌曲是很特殊的吧，知识不怎么被认可

哪里的话，知识才是实现效果的根本啊{:4_187:}

马黑黑 发表于 2026-6-6 20:19

红影 发表于 2026-6-6 19:56
哪里的话，知识才是实现效果的根本啊

打错字了，是“只是”

马黑黑 发表于 2026-6-6 20:19

红影 发表于 2026-6-6 19:55
这个最新的制作非常漂亮

漂亮不漂亮是帖子的制作问题，audioplayer 插件的功能不管这个
页: [1] 2
查看完整版本: 相变临界OST