论坛 › 欢乐水吧 › 无奈的思绪 （学习黑黑老师夏花的代码）

梦江南 发表于 2025-9-11 09:51

无奈的思绪 （学习黑黑老师夏花的代码）

<style>
    @import 'https://638183.freep.cn/638183/web/css/tz01.css';
    #pa { --offsetX: 81px; --bg: url('https://img2.oldkids.cn/upload/2025/09/10/blog_260798238_20250910183059610.jpg') no-repeat center/cover; --ma-size: 13%; }
    #ma { animation: unset; cursor: unset; left: 10px; bottom: 65px; }
    #btnFs { right: 20px; top: 20px; color: #eee; border-color: currentColor!important; }
    #player { stroke-width: 2; cursor: pointer; animation: rotate 8s linear infinite var(--state); }
    #lrc { left: 30px; bottom: 20px; }
    #lrc::before { background: cde6c7; background-clip: text; -webkit-background-clip: text; }
    .prog { stroke-width: 10; transition: 0.25s; }
</style>

<div id="pa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=417833584" autoplay loop></audio>
    <video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/01/32/5b3f53c677460.mp4" autoplay loop muted></video>
    <div id="ma" class="brightness">
      <svg id="msvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
            <path class="prog" d="M0 190 C-200 20,-300 -320,0 -100 C300 -320,200 20,0 190" fill="lightyellow" stroke="red" stroke-dasharray="1227" stroke-dashoffset="1227"></path>
            <path class="prog" d="M0 190 C-200 20,-300 -320,0 -100 C300 -320,200 20,0 190" fill="none" stroke="rgba(100,0,0,.35)" stroke-dasharray="1227" stroke-dashoffset="0" style="cursor: pointer;">
                <title>调节进度</title>
            </path>
            <path id="player" d="M0 0 C-160 100 100 100 0 0 C-6.603 -188.564 -136.603 36.603 0 0 C166.603 88.564 36.603 -136.603 0 0Z" fill="darkred" stroke="yellow">
                <title>Alt+X</title>
            </path>
      </svg>
    </div>
</div>


<script type="module">
    import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
    import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';

    const progs = document.querySelectorAll('.prog'); // 进度条(path标签)标识
    const pathLength = progs.getTotalLength(); // 路径长度

    // 音频播放时 : 进度变更+跳动
    aud.ontimeupdate = () => {
      progs.setAttribute('stroke-dashoffset', pathLength - pathLength * aud.currentTime / aud.duration);
      progs.setAttribute('opacity', Math.random() * 0.5 + 0.5);
    };

    // 点击track路径 : 调节播放进度
    progs.onclick = (e) => {
      const point = msvg.createSVGPoint(); // 创建坐标对象
      point.x = e.clientX;
      point.y = e.clientY;
      // 转换点坐标为svg坐标对象
      const svgPoint = point.matrixTransform(msvg.getScreenCTM().inverse());
      if (progs.isPointInStroke(svgPoint)) {
            aud.currentTime = aud.duration * getDistanceFromStart(progs, svgPoint) / pathLength;
      }
    };

const geci = [
   ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

    FS(pa, player);
    lrc(pa, geci);

    // 获取路径点击点长度
    function getDistanceFromStart(pathElement, point) {
      const samples = Math.ceil(pathLength); // 按像素采样
      let bestPos = 0;
      let bestDist = Infinity;
      // 路径起点
      const startPoint = pathElement.getPointAtLength(0);
      let minDist = Math.hypot(point.x - startPoint.x, point.y - startPoint.y);
      // 采样路径上的点
      for (let i = 0; i <= samples; i++) {
            const pos = (i / samples) * pathLength;
            const pathPoint = pathElement.getPointAtLength(pos);
            const dist = Math.hypot(point.x - pathPoint.x, point.y - pathPoint.y);
            if (dist < minDist) {
                minDist = dist;
                bestPos = pos;
            }
      }
      // 处理封闭路径
      if (bestPos > pathLength - 1 && minDist > Math.hypot(point.x - startPoint.x, point.y - startPoint.y)) {
            return 0;
      }
      return bestPos;
    }
</script>

梦油 发表于 2025-9-11 10:18

柔情似水、唯美浪漫，太美了！

梦江南 发表于 2025-9-11 11:15

梦油 发表于 2025-9-11 10:18
柔情似水、唯美浪漫，太美了！

谢谢梦油沙发欣赏，问好！

红影 发表于 2025-9-11 11:20

这歌词同步的高亮漂亮，是另一个帖子里的效果呢，江南用得真好{:4_199:}

红影 发表于 2025-9-11 11:20

这背景制作也极漂亮，好喜欢。给江南点赞{:4_199:}

梦江南 发表于 2025-9-11 11:24

红影 发表于 2025-9-11 11:20
这歌词同步的高亮漂亮，是另一个帖子里的效果呢，江南用得真好

回影子，这歌词的高亮是歪打正着了。{:4_173:}

梦江南 发表于 2025-9-11 11:26

红影 发表于 2025-9-11 11:20
这背景制作也极漂亮，好喜欢。给江南点赞

谢谢影子喜欢，问好。{:4_204:}

小文 发表于 2025-9-11 12:40

好听！欣赏并问好江南！

小辣椒 发表于 2025-9-11 13:02

阿姨这个背景图做的太美了{:4_178:}

小辣椒 发表于 2025-9-11 13:04

哈哈，阿姨挺聪明的，构思特别的好，虽然套用代码，但总让人看了效果出奇的好{:4_199:}{:4_199:}

小辣椒 发表于 2025-9-11 13:04

感谢阿姨精彩分享{:4_179:}

梦油 发表于 2025-9-11 14:15

梦江南 发表于 2025-9-11 11:15
谢谢梦油沙发欣赏，问好！

今年下午好！

梦江南 发表于 2025-9-11 14:59

小文 发表于 2025-9-11 12:40
好听！欣赏并问好江南！

谢谢小文欣赏，问好。{:4_204:}

梦江南 发表于 2025-9-11 15:02

小辣椒 发表于 2025-9-11 13:02
阿姨这个背景图做的太美了

小辣椒来了哇，真开心。小辣椒，这个背景图是用AI做的。{:4_187:}

梦江南 发表于 2025-9-11 15:05

小辣椒 发表于 2025-9-11 13:04
哈哈，阿姨挺聪明的，构思特别的好，虽然套用代码，但总让人看了效果出奇的好

阿姨听你的话，做简单点，套用玩就不会太累了。再说太深奥的也不会，就这样玩玩呗。{:4_185:}

梦江南 发表于 2025-9-11 15:06

小辣椒 发表于 2025-9-11 13:04
感谢阿姨精彩分享

一上来就顶了这么多帖，不要太累了哦。{:4_179:}

梦江南 发表于 2025-9-11 15:07

梦油 发表于 2025-9-11 14:15
今年下午好！

下午好。

杨帆 发表于 2025-9-11 17:42

制作美，效果棒，谢谢江南精彩分享{:4_204:}

红影 发表于 2025-9-11 18:40

梦江南 发表于 2025-9-11 11:24
回影子，这歌词的高亮是歪打正着了。

特别好，江南的学习很灵活{:4_187:}

红影 发表于 2025-9-11 18:41

梦江南 发表于 2025-9-11 11:26
谢谢影子喜欢，问好。

特别喜欢的 背景，太美了{:4_187:}

查看完整版本: 无奈的思绪 （学习黑黑老师夏花的代码）