醉梦

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/zvmg.webp') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
   
3.         #papa::before, #papa::after { position: absolute; content: url('https://638183.freep.cn/638183/t22/gif/star.gif'); top: 0; left: 0; mix-blend-mode: screen; animation: fadein 1s infinite alternate var(--state); }
   
4.         #papa::after { left: 170px; transform: rotateY(-180deg); }
   
5.         @keyframes fadein { to {opacity: .1; } }
   
6. </style>
   
7. 
   
8. <div id="papa"></div>
   
9. <audio id="aud" src="https://yinpin.s3-us-east-1.ossfiles.com/zvmg.mp3" crossorigin="anonymous" autoplay loop></audio>
   
10. 
    
11. <script>
    
12.        
    
13. (function() {
    
14.         let script = document.createElement('script');
    
15.         script.src = 'https://638183.freep.cn/638183/web/api/xyanklet_lrc.js';
    
16.         script.charset = 'utf-8';
    
17.         document.head.appendChild(script);
    
18.         let geci = [ [1,"竹影聆风  醉梦",4], [6,"",1] ];
    
19.         script.onload = () => {
    
20.                 HCPlayer({
    
21.                         papa: '#papa',
    
22.                         lrcAr: geci,
    
23.                         lrc_css: 'top: 20px;',
    
24.                         fs_css: 'top: 100px; color: #ddd; background: #000;',
    
25.                         player_css: `
    
26.                                 bottom: 30px;
    
27.                                 border-width: 0;
    
28.                                 color: #fff;
    
29.                                 --size: 240px;
    
30.                                 --bRad: 64% 36% 70% 30% / 31% 20% 80% 69%;
    
31.                                 --track: tan;
    
32.                                 --prog: magenta;
    
33.                                 --btnBg: linear-gradient(lime, red);
    
34.                         `,
    
35.                         lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
    
36.                 });
    
37.         };
    
38. })();
    
39. 
    
40. </script>
    

复制代码

马黑黑

配置代码说明

1. (function() {
   
2.         let script = document.createElement('script');
   
3.         script.src = 'https://638183.freep.cn/638183/web/api/xyanklet_lrc.js';
   
4.         script.charset = 'utf-8';
   
5.         document.head.appendChild(script);
   
6.         let geci = [ [1,"竹影聆风  醉梦",4], [6,"",1] ];
   
7.         script.onload = () => {
   
8.                 HCPlayer({
   
9.                         papa: '#papa',
   
10.                         lrcAr: geci,
    
11.                         lrc_css: 'top: 20px;',
    
12.                         fs_css: 'top: 100px; color: #ddd; background: #000;',
    
13.                         player_css: `
    
14.                                 bottom: 30px;
    
15.                                 border-width: 0;
    
16.                                 color: #fff;
    
17.                                 --size: 240px;
    
18.                                 --bRad: 64% 36% 70% 30% / 31% 20% 80% 69%;
    
19.                                 --track: tan;
    
20.                                 --prog: magenta;
    
21.                                 --btnBg: linear-gradient(lime, red);
    
22.                         `,
    
23.                         lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
    
24.                 });
    
25.         };
    
26. })();

复制代码

01和26行： (function(){ 代码块 })(); 是将配置的具体代码用匿名函数包裹起来，一来避免变量污染、二来是为了令评分提交后脚本仍可运行；
02-05行：以追加元素的方式加载JS插件；

06行：声明歌词同步的数组变量，留待插件配置使用；

07和25行： script.onload = () => {代码块}; 是追加的插件文档加载完毕后再写具体参数配置以免程序出错；

08和24行： HCPlayer({代码块});  插件的具体参数配置写在这里的花括号内；

09行：指定帖子的主元素；

10行：指定同步歌词数组（前面声明为 geci）；

11行：设置 lrc 同步歌词UI相关（和以前的配置一脉相承）；

12行：配置全屏按钮UI；

13-22行：配置播放器，CSS属性和CSS变量较多，一一解释如下：

    14行 bottom: 30px; 设置播放器的位置。本帖，帖子元素设置了所有做元素绝对居中，所以，这里只设置播放器的 bottom 属性即可；
    15行 border-width: 0; 播放器边框设置，相当于脚链的穿绳，这里设置宽度为0表示不要穿绳。缺省或默认有穿绳，也可直接使用 border 属性自行设置取代本行，例如：border: 2px dashed red;
    16行 color: #fff; 设置时间信息文本颜色；
    17行 --size: 240px; 设置播放器宽高；
    18行 --bRad: 64% 36% 70% 30% / 31% 20% 80% 69%; 设置珠子的形状，通过 border-radius 属性改变珠子外观。比如想要圆形，--bRad: 50%; ，想要树叶，-bRad: 0 100%; ，其他的，0 50% 或 50% 100% 或更复杂的都可以试试；
    19行 --track: tan; 设置进度条底轨颜色；
    20行 --prog: magenta; 设置进度指示颜色；
    21行 --btnBg: linear-gradient(lime, red); 设置播放控制按钮背景色，支持渐变、图片，尺寸固定为40*40；
    22行 lizi: { color1: '', color2: 'rgba(240,180,55,.75)' }, 设置珠子颜色的子对象，就这两个键值对，缺省或空值插件将自动分配。

梦油

代码，我不懂，但图美、曲好，令人陶。谢谢黑黑先生。分享了。

红影

黑黑厉害，把这么多内容都整合好了，还留了这么多接口

红影

原来就是用这一圈珠子的大小变化来体现音乐的动感的，好漂亮的响应式音乐制作

红影

笑，这个帖子还带回帖奖励的，有好代码可用，还有奖励，赚大发了

红影

这《醉梦》真想多醉几次啊

红影

配色也好漂亮，浅色系的珠子和灯光星光相互交映，如梦似幻的美感

红影

好像所有的讲解中，就这个：
22行 lizi: { color1: '', color2: 'rgba(240,180,55,.75)' }, 设置珠子颜色的子对象，就这两个键值对，缺省或空值插件将自动分配。
没看懂，为什么是两个颜色？我得再看看脚链那个帖子去

红影

红影 发表于 2023-9-1 10:27
好像所有的讲解中，就这个：
22行 lizi: { color1: '', color2: 'rgba(240,180,55,.75)' }, 设置珠子颜色 ...

我知道了，color1不设置就是随机色，对应脚链里的background吧，color2对应的是脚链里的mnColor吧，是内阴影的设置

非常开心

融图美，场景自然和谐，歌曲动听。

非常开心

代码，确实不懂，只能模仿

马黑黑

醉美水芙蓉 发表于 2023-9-1 12:13
好多人都喜欢隐藏代码，不让别人模仿，只有黑黑老师是公开的！再次感谢黑黑老师的代码教程！

遮遮掩掩没意思的