无罔

马黑黑

马黑黑

帖子代码

1. <style>
   
2. .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; }
   
3. .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; }
   
4. .mydiv::after { --delay: -80.3s; }
   
5. @keyframes move { from {offset-distance: 0%; } to { offset-distance: 100%; } }
   
6. </style>
   
7. 
   
8. <div class="mydiv"></div>
   
9. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2065995408.mp3" loop autoplay></audio>
   
10. 
    
11. <script >
    
12. let script = document.createElement('script');
    
13. script.src = 'https://638183.freep.cn/638183/web/api/pinpuz_lrc.js';
    
14. document.head.appendChild(script);
    
15. 
    
16. (function() {
    
17.     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], ];
    
18. 
    
19.    window.onload = () => {
    
20.         HCPlayer({
    
21.             papa: `.mydiv`,
    
22.             lrcAr: lrcAr,
    
23.             lrc_css: `
    
24.                 top: 15px;
    
25.                 color: snow;
    
26.             `,
    
27.             player_css: `
    
28.                 color: snow;
    
29.                 top: 120px;
    
30.                 --len: 2px;
    
31.             `,
    
32.             pinpu_num: 60,
    
33.         });
    
34.    }
    
35. })();
    
36. </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`});

红影

黑黑又把圆环播放器做了封装和上传，真棒

红影

奇怪，我这里点暂停后再点播放，才能看到播放器上的频谱是变化的。
蜜蜂开始也没看到沿着设定路线运动，也是需要暂停再播放才可以。
可能是我网速或电脑问题吧

马黑黑

红影 发表于 2023-7-25 19:46
奇怪，我这里点暂停后再点播放，才能看到播放器上的频谱是变化的。
蜜蜂开始也没看到沿着设定路线运动，也 ...

不是电脑问题，估计与资源的下载有关，一定概率。下回在访问一般没问题。具体原因尚未找到。

马黑黑

醉美水芙蓉 发表于 2023-7-25 20:11
这个跟前面频谱一样颠倒了吗？

按理不会颠倒吧，应该是围着圆环往外伸缩。

马黑黑

醉美水芙蓉 发表于 2023-7-25 20:10
等半天才看见播放器，而且频谱不动，需要手动才动！

马黑黑

醉美水芙蓉 发表于 2023-7-25 21:37
跟红影美女说的问题相同，估计黑黑老师浏览器高级，我看见风中飞尘朋友还说看见乱码，我想浏览器不同可能看 ...

按理不应该酱紫，我考虑了兼容性问题，没有使用 flex 布局，另外我用Chrome，Edge，百分，Firefox 等测试过，都正常。

马黑黑

醉美水芙蓉 发表于 2023-7-25 21:39
点播放器中间就看见乱码了？

按理不会。

红影

马黑黑 发表于 2023-7-25 20:44
不是电脑问题，估计与资源的下载有关，一定概率。下回在访问一般没问题。具体原因尚未找到。

好像再进来还是这样呢。之前的封装貌似没这样的问题吧

马黑黑

红影 发表于 2023-7-25 22:33
好像再进来还是这样呢。之前的封装貌似没这样的问题吧

搞不清楚。你再试下

花飞飞

直的和斜的都没有乱码，正常播放。
但也是需点击才动
刷新后，如果上排和下排都是0：00，就可以自动播放，。。
如果上排是0：00，下排是4：33就不会自动播放。