瑶族舞曲

马黑黑

马黑黑

帖子代码（插件仍在测试中）

1. <style>
   
2.         #papa { margin: auto; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/3/yzwq.jpeg') 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.         li-zi { position: absolute; top: 100%; box-shadow: 0 0 12px 0 snow inset; border-radius: 50%; animation: drop var(--dur) var(--delay) infinite linear var(--state); }
   
4.         @keyframes drop { to { top: -100%; } }
   
5. </style>
   
6. 
   
7. <div id="papa"></div>
   
8. <audio id="aud" crossorigin="anonymous" src="https://yinpin.s3-us-east-1.ossfiles.com/yzwq.mp3" autoplay loop></audio>
   
9. 
   
10. <script>
    
11.        
    
12. (function() {
    
13.         let script = document.createElement('script');
    
14.         script.src = 'https://638183.freep.cn/638183/web/api/xypp_lrc.js';
    
15.         script.charset = 'utf-8';
    
16.         document.head.appendChild(script);
    
17.         let geci = [ [1,"瑶族舞曲",4], [6,"",1] ];
    
18.         script.onload = () => {
    
19.                 HCPlayer({
    
20.                         papa: '#papa',
    
21.                         lrcAr: geci,
    
22.                         lrc_css: 'left: 30px; top: 20px; color: lightblue; --bg: linear-gradient(rgba(100,140,50,.15),rgba(100,140,50,.45));',
    
23.                         player_css: `
    
24.                                 bottom: 26px;
    
25.                                 --ww: 500px;
    
26.                                 --color1: purple;
    
27.                                 --color2: lightblue;
    
28.                                 --track: #aaa;
    
29.                         `,
    
30.                         pinpu: { size: 4, gap: 1},
    
31.                 });
    
32.         };
    
33.         Array.from({length: 50}).forEach((item) => {
    
34.                 item = document.createElement('li-zi');
    
35.                 let size = 10 + Math.ceil(Math.random() * 10);
    
36.                 item.style.cssText += `
    
37.                         --dur: ${10 + Math.random() * 10}s;
    
38.                         --delay: -${Math.random() * 10}s;
    
39.                         width: ${size}px;
    
40.                         height: ${size}px;
    
41.                         left: ${Math.random() * 100}%;
    
42.                         background: #${Math.random().toString(16).substr(-6)};
    
43.                 `;
    
44.                 papa.appendChild(item);
    
45.         });
    
46. })();
    
47. 
    
48. </script>

复制代码

马黑黑

配置其实一看就能明白，这里还是简单说一下吧——
一、频谱CSS设置

player_css: `
    bottom: 26px;
    --ww: 500px;
    --color1: purple; /* 频谱条渐变颜色1，同时是文本颜色、进度指示颜色 */
    --color2: lightblue; /* 频谱条渐变颜色2，同时是频谱帽、进度条底板颜色 */
    --track: #aaa; /* 进度条底色 */
`,



二、频谱子对象设置


pinpu: { size: 4, gap: 1},

就两个参数，size 是频谱条宽度，gap 是频谱条间距

红影

带进度条的响应式频谱，这个很漂亮啊

红影

颜色的配置归拢成两类了吧，时间、进度、以及频谱双色之一都是一种颜色，其余的归为另一种。是这样吧？

马黑黑

红影 发表于 2023-8-26 22:52
带进度条的响应式频谱，这个很漂亮啊

像一把梳子

马黑黑

红影 发表于 2023-8-26 22:56
颜色的配置归拢成两类了吧，时间、进度、以及频谱双色之一都是一种颜色，其余的归为另一种。是这样吧？

大致如此，具体看二楼

马黑黑

醉美水芙蓉 发表于 2023-8-26 23:26
加了刻度就是一把尺了！

马黑黑

醉美水芙蓉 发表于 2023-8-26 23:28
这个做十面埋伏肯定漂亮！

应该是

马黑黑

醉美水芙蓉 发表于 2023-8-26 23:29
黑黑老师频谱配色漂亮！

果酱果酱

红影

马黑黑 发表于 2023-8-26 22:57
像一把梳子

叫它梳子频谱更好，知道指的是哪个效果了呢。当然这个名不好听，每个插件给个特定的名字才好呢

红影

马黑黑 发表于 2023-8-26 23:03
大致如此，具体看二楼

嗯嗯，看到的，我差不多猜对了

梦油

美妙的乐曲悠静委婉、粗犷热烈明朗活泼，太棒了！

马黑黑

梦油 发表于 2023-8-27 08:29
美妙的乐曲悠静委婉、粗犷热烈明朗活泼，太棒了！

乐曲应该是很熟悉的吧？只是很多人平时不太留意

马黑黑

红影 发表于 2023-8-27 07:49
嗯嗯，看到的，我差不多猜对了

其实是分析对了

马黑黑

红影 发表于 2023-8-27 07:49
叫它梳子频谱更好，知道指的是哪个效果了呢。当然这个名不好听，每个插件给个特定的名字才好呢

生孩子容易，给孩子安个合适的名字困难，所以有人干脆就叫阿猫阿狗什么的

梦油

马黑黑 发表于 2023-8-27 10:20
乐曲应该是很熟悉的吧？只是很多人平时不太留意

是的，我很熟悉这支乐曲。