梦江南 发表于 2026-6-12 16:38

学习黑黑老师的东方神韵精选（三）播放器


<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://pan.suyanw.cn/view.php/2e45e12b589411d467b733425e94193e.jpg') no-repeat center/cover; color: yellow;border-radius:32px; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { bottom: 25px; left: 20px; }
    #msvg { position: absolute;left: 1230px; width: 10vw; heighht: 10vw; bottom: 60px; right: 20px; opacity: 1; cursor: pointer; }
    #msvg path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 2s var(--delay) forwards, fill 0.75s calc(var(--delay) + 2s) forwards; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
    @keyframes fill { to {fill: url(#grd); } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/79/71/60c86235ea083.mp4" autoplay loop muted border-radius:22px; ></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
      <title>播放/暂停(Alt+X)</title>
      <defs>
                  <linearGradient id="grd" x1="0" x2="0" y1="0" y2="1">
                            <stop offset="0%" stop-color="red"></stop>
                            <stop offset="50%" stop-color="orange"></stop>
                            <stop offset="100%" stop-color="darkred"></stop>
                  </linearGradient>
            </defs>
            <g id="g1"></g>
    </svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [
            ['https://music.163.com/song/media/outer/url?id=5265054', '昭君出塞 - 李炜'],
            ['https://music.163.com/song/media/outer/url?id=5265056', '出水莲 - 饶宁新'],
            ['https://music.163.com/song/media/outer/url?id=5265057', '蝶恋花 - 赵登山'],
            ['https://music.163.com/song/media/outer/url?id=5265058', '流水行云 - 赵登山'],
            ['https://music.163.com/song/media/outer/url?id=5265063', '梁祝 - 苏巧筝'],
            ['https://music.163.com/song/media/outer/url?id=5265060', '彩云追月 - 苏巧筝'],
            ['https://music.163.com/song/media/outer/url?id=5265061', '广陵散 - 饶宁新'],
            ['https://music.163.com/song/media/outer/url?id=5267454', '十面埋伏(琵琶独奏) - 群星']
      ],
      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.path('M0 0 Q80 -180,-50 -190 Q0 -70,50 -190 Q-80 -180, 0 0', 'transparent', 'yellow', 3).addTo(g1).rotates(5);
      setProperties();

      function setProperties() {
            const paths = msvg.querySelectorAll('path');
            paths.forEach((path, idx) => {
                path.style.cssText += `
                  --len: ${path.getTotalLength()};
                  --delay: ${idx * 2.75}s;
                `;
            });
            paths.onanimationend = () => {
                setTimeout(() => { g1.classList.add('rotate'); }, 750);
            };
      }
    }

    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-12 16:39

鸣谢黑黑老师的东方神韵精选（三）源代码。{:4_180:}

红影 发表于 2026-6-12 17:08

这么多好听的古典音乐。
制作漂亮，音乐好听，欣赏江南好帖{:4_187:}

梦江南 发表于 2026-6-12 17:48

红影 发表于 2026-6-12 17:08
这么多好听的古典音乐。
制作漂亮，音乐好听，欣赏江南好帖

问好影子，谢谢支持鼓励。{:4_204:}
古典音乐多着呢，有的是要会员的。

玫瑰 发表于 2026-6-12 18:17

精彩的分享，制作好看，美的欣赏。

梦江南 发表于 2026-6-12 18:29

玫瑰 发表于 2026-6-12 18:17
精彩的分享，制作好看，美的欣赏。

谢谢玫瑰分享，问好！{:4_204:}

玫瑰 发表于 2026-6-12 18:34

梦江南 发表于 2026-6-12 18:29
谢谢玫瑰分享，问好！

问好梦江南，欣赏好制作。{:4_171:}

梦油 发表于 2026-6-12 19:57

这音乐很好听。

梦江南 发表于 2026-6-12 20:05

玫瑰 发表于 2026-6-12 18:34
问好梦江南，欣赏好制作。

谢谢玫瑰支持，问好！{:4_180:}

梦江南 发表于 2026-6-12 20:05

梦油 发表于 2026-6-12 19:57
这音乐很好听。

谢谢梦油支持，问好！{:4_180:}

杨帆 发表于 2026-6-12 21:41

好听好看，谢谢江南精彩分享{:4_204:}

也曾年轻 发表于 2026-6-12 21:52

https://q1.itc.cn/q_70/images03/20260228/afe38ef2df864af6accc94ace625214f.gif

霜染枫丹 发表于 2026-6-12 21:57

欣赏学习梦江南的佳作，晚上好~~

梦江南 发表于 2026-6-13 07:39

杨帆 发表于 2026-6-12 21:41
好听好看，谢谢江南精彩分享

问好杨帆，谢谢欣赏支持。{:4_180:}

梦江南 发表于 2026-6-13 07:40

也曾年轻 发表于 2026-6-12 21:52


问好老师，谢谢可爱动图支持。{:4_180:}

梦江南 发表于 2026-6-13 07:41

霜染枫丹 发表于 2026-6-12 21:57
欣赏学习梦江南的佳作，晚上好~~

问好版主，谢谢欣赏支持。{:4_180:}
页: [1]
查看完整版本: 学习黑黑老师的东方神韵精选（三）播放器