Lyria

马黑黑

马黑黑

代码

1. <style>
   
2.         #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/lyria.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.         li-zi { position: absolute; top: 100%; box-shadow: 0 0 15px 0 lightgreen inset; border-radius: 50% 50% 25% 50%; transform: rotate(45deg); animation: fly var(--dur) var(--delay) infinite linear var(--state); }
   
4.         @keyframes fly { 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/lyria.mp3" autoplay></audio>
   
9. 
   
10. <script>
    
11.        
    
12. (function() {
    
13.         let script = document.createElement('script');
    
14.         script.src = 'https://638183.freep.cn/638183/web/api/xyosc_lrc.js';
    
15.         script.charset = 'utf-8';
    
16.         document.head.appendChild(script);
    
17.         let geci = [ [1,"Karunesh - Lyria",4], [6,"",1] ];
    
18.         script.onload = () => {
    
19.                 HCPlayer({
    
20.                         papa: '#papa',
    
21.                         lrcAr: geci,
    
22.                         lrc_css: `
    
23.                                 left: 30px;
    
24.                                 top: 20px;
    
25.                                 color: lightblue;
    
26.                                 --bg: linear-gradient(rgba(100,140,50,.15),rgba(100,140,50,.45));
    
27.                         `,
    
28.                         player_css: `
    
29.                                 bottom: 50px;
    
30.                                 left: 100px;
    
31.                                 --ww: 400px;
    
32.                         `,
    
33.                         pinpu: { size: 1, gap: 1, color1: 'rgba(20,20,100,.5)', color2: 'snow'},
    
34.                 });
    
35.         };
    
36.         Array.from({length: 50}).forEach((item) => {
    
37.                 item = document.createElement('li-zi');
    
38.                 let size = 15 + Math.ceil(Math.random() * 20);
    
39.                 item.style.cssText += `
    
40.                         --dur: ${20 + Math.random() * 10}s;
    
41.                         --delay: -${Math.random() * 20}s;
    
42.                         width: ${size}px;
    
43.                         height: ${size}px;
    
44.                         left: ${Math.random() * 100}%;
    
45.                         background: #${Math.random().toString(16).substr(-6)};
    
46.                 `;
    
47.                 papa.appendChild(item);
    
48.         });
    
49. })();
    
50. 
    
51. </script>

复制代码

马黑黑

插件的参数配置中，pinpu 子对象的配置说明如下：

   pinpu: { size: 1, gap: 1, color1: 'rgba(20,20,100,.5)', color2: 'snow'},

共四个参数，可以不按顺序配置：

① size: 数值,  频谱条的宽度。值只要数值，不要px等单位，例如：size: 2,

② gap: 数值,  频谱条间距，配置要求同 ① ，例如：gap: 1,

③ color1: 颜色字符串,  频谱条渐变颜色1、主色，字符串要放在引号里，例如：color1: '#ff0000',

④ color2: 颜色字符串,  频谱条渐变颜色2、头尾配色，配置要求同 ③，例子略

【附】关于频谱颜色

子对象 pinpu: {配置代码} 如果不设置 color1 和 color2，或其值为空字符，插件将使用随机颜色配色频谱条，五颜六色的效果。例如：

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

或者：

    pinpu: {size: 1, gap: 1, color1: '', color2: ''},

这样的配置都会使用随机颜色渲染频谱条。而：

    pinpu: {size: 1, gap: 1, color2: 'red'},  或   pinpu: {size: 1, gap: 1, color1:'', color2: 'red'},

——如此配置，主颜色（频谱条中间部分的颜色）随机，头尾装饰色红色。

马黑黑

这个效果大约是示波状的响应式频谱吧，所以插件文档命名为 xyosc_lrc.js

亦是金

这个频谱好看！我喜欢！谢谢马黑黑老师分享代码！

红影

又是一个新的响应式频谱效果，这个好漂亮，特别适合用来听音乐，一边听着好听的音乐，一边看着音乐被显示出来，更容易被音乐陶醉

红影

这音乐真好听。去搜了一下乐评：“《Lyria》旋律以锡塔尔琴柔和的弦音展开,逐渐引导听者进入神秘色彩的音乐世界。琴音如同一个娓娓道来的故事,低沉而充满力量,又如同一阵轻风,轻盈而具有穿透力,,,,,”

红影

马黑黑 发表于 2023-8-29 08:27
这个效果大约是示波状的响应式频谱吧，所以插件文档命名为 xyosc_lrc.js

嗯嗯，这个新效果是带命名的呢

红影

马黑黑 发表于 2023-8-29 08:25
插件的参数配置中，pinpu 子对象的配置说明如下：

   pinpu: { size: 1, gap: 1, color1: 'rgba(20,20,1 ...

跑去pencilcode里看了看随机色效果，也很好看呢

马黑黑

红影 发表于 2023-8-29 10:04
跑去pencilcode里看了看随机色效果，也很好看呢

随机颜色采用16进制的，没有做透明设置

马黑黑

红影 发表于 2023-8-29 10:03
嗯嗯，这个新效果是带命名的呢

文件名都能多少体现其主要性状的

马黑黑

红影 发表于 2023-8-29 09:51
这音乐真好听。去搜了一下乐评：“《Lyria》旋律以锡塔尔琴柔和的弦音展开,逐渐引导听者进入神秘色彩的音乐 ...

歌手在印度旅居过，思想受佛教的影响，音乐中融入了作者对佛教的理解

马黑黑

红影 发表于 2023-8-29 09:47
又是一个新的响应式频谱效果，这个好漂亮，特别适合用来听音乐，一边听着好听的音乐，一边看着音乐被显示出 ...

其实这个效果用频谱模拟出来多少有些牵强，但很多人都说这个用CSS+HTML做不出来，我就试试

马黑黑

亦是金 发表于 2023-8-29 09:44
这个频谱好看！我喜欢！谢谢马黑黑老师分享代码！

马黑黑

醉美水芙蓉 发表于 2023-8-29 12:06
很漂亮！

还好吧

红影

马黑黑 发表于 2023-8-29 12:04
随机颜色采用16进制的，没有做透明设置

不透明也好，更退出频谱呢

红影

马黑黑 发表于 2023-8-29 12:05
文件名都能多少体现其主要性状的

是的，其实文件名就是给它命名了呢

红影

马黑黑 发表于 2023-8-29 12:07
歌手在印度旅居过，思想受佛教的影响，音乐中融入了作者对佛教的理解

这音乐非常吸引人，让人不觉就陶醉其中了。

红影

马黑黑 发表于 2023-8-29 12:08
其实这个效果用频谱模拟出来多少有些牵强，但很多人都说这个用CSS+HTML做不出来，我就试试

黑黑最厉害了，想弄什么肯定弄得出的