<style>
    .mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t23/webp1/wuwh.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; --state: running; }
    .mydiv::before,.mydiv::after { position: absolute; left: 0px; top: 0px; content: url('https://638183.freep.cn/638183/Pic/2022/bee01.gif'); offset-path: path('M-20,500 L130,440 L220,550 L370,440 L470,300 L520,590 L600,520 L850,430 L980,500'); animation: move 160s var(--delay) infinite var(--state); --delay: 0s; }
    .mydiv::after { --delay: -80.3s; }
    @keyframes move { from {offset-distance: 0%; } to { offset-distance: 100%; } }
    </style>

    <div class="mydiv"></div>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2065995408.mp3" loop autoplay></audio>

    <script >
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/pinpuz_lrc.js';
    document.head.appendChild(script);

    (function() {
        let lrcAr = [ [2,"啊Yue Yue - 无罔",10.5], [11.55,"作曲：田昊",1.8], [15.32,"作词：林乔/零",1.8], [18.14,"制作人：林乔",1.8], [38.3,"我和你 相距着 云端和海洋",5.2], [44.4,"一念近 一念远 未遗忘身在何方",6.5], [52.05,"问过往 恩怨如何细细端详",6.0], [58.63,"时光耳旁说无常",6.0], [66.54,"注定只会 贪欢一晌",6.5], [73.08,"转身隐藏 那眼底的情霜",5.5], [79.94,"纵然遗憾成枉 难附几多愁肠",7.1], [87.34,"深眉锁秋月 夜凄凉",6.0], [94,"奈何思念无望",3.3], [97.45,"爱已成殇 隔天涯骇浪",3.5], [101.58,"水天相拥不过 是美梦一场",6.0], [108.38,"徒断线有回响",3.2], [111.88,"心底藏触不到的对方",3.6], [115.91,"叹情长 爱恨怎可随意 执掌",8.8], [138.68,"我和你 相距着 云端和海洋",5.4], [144.76,"一念近 一念远 未遗忘身在何方",6.8], [152.18,"问过往 恩怨如何细细端详",6.4], [158.84,"时光耳旁说无常",6.4], [166.53,"注定只会 贪欢一晌",6.4], [173.24,"转身隐藏 那眼底的情霜",6.0], [180.37,"纵然遗憾成枉 难附几多愁肠",6.8], [187.46,"深眉锁秋月 夜凄凉",6.0], [194.32,"奈何思念无望",3.4], [197.68,"爱已成殇 隔天涯骇浪",3.8], [201.75,"水天相拥不过 是美梦一场",6.0], [208.58,"徒断线有回响",3.2], [212.06,"心底藏触不到的对方",3.5], [216.06,"叹情长 爱恨怎可随意 执掌",6.0], [223.01,"奈何思念无望",3.3], [226.49,"爱已成殇 隔天涯骇浪",3.5], [230.51,"水天相拥不过 是美梦一场",6.1], [237.31,"徒断线有回响",3.3], [240.72,"心底藏触不到的对方",3.6], [244.81,"叹情长 爱恨怎可随意执掌",6.0], ];

       window.onload = () => {
            HCPlayer({
                papa: `.mydiv`,
                lrcAr: lrcAr,
                lrc_css: `
                    top: 15px;
                    color: snow;
                `,
                player_css: `
                    color: snow;
                    top: 120px;
                    --len: 2px;
                `,
                pinpu_num: 60,
            });
       }
    })();

    </script>

------------------------------------------------------------------------------------------------------------

圆环频谱插件配置举例（使用时请将注释 /* ... */ 删掉）：

    window.onload = () => {
        HCPlayer({
            papa: `.mydiv`, /* 指明帖子主元素标识 如果是 id 则是 `#mydiv`*/
            lrcAr: lrcAr, /* lrc歌词 冒号后面的 lrcAr 是事先声明的数组变量 */
            lrc_css: ` /* 配置lrc歌词 UI */
                top: 15px; /* 上边 */
                left: 15px; /* 左边 */
                color: snow; /* 歌词底色 */
                --bg: linear-gradient(red,green); /* 同步颜色 */
            `,
            player_css: ` /* 配置播放器 UI */
                color: snow; /* 文本颜色 */
                top: 120px; /* 上边 */
                left: 45%; /* 左边 */
                --len: 2px; /* 频谱条大小 */
            `,
            pinpu_num: 60, /* 频谱条数 注意结合上面的 --len 合理设置 */
        });
    }


上面的频谱条是站立姿势的，歪斜的文档名是 pinpux_lrc.js ，改个引用文件名即可，配置参数一样。

-------------------------------------------------------------------------------------------------------------

使用默认配置，可以酱紫：

        HCPlayer({
            papa: `.mydiv`,
            lrcAr: lrcAr,
        });

若没有歌词同步需求，lrcAr: lrcAr, 也可以不要，则，这是最简短的参数配置：

        HCPlayer({papa: `.mydiv`});

前一篇: 《许愿树》修正代码
下一篇: 荒羽（封装带进度条的小圆头频谱代码）