论坛 › 动画音画 › Lyria

马黑黑 发表于 2023-8-29 08:11

Lyria

<style>
        #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; }
        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); }
        @keyframes fly { to { top: -100%; } }
</style>

<div id="papa"></div>
<audio id="aud" crossorigin="anonymous" src="https://yinpin.s3-us-east-1.ossfiles.com/lyria.mp3" autoplay></audio>

<script>
       
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/xyosc_lrc.js';
        script.charset = 'utf-8';
        document.head.appendChild(script);
        let geci = [ , ];
        script.onload = () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: geci,
                        lrc_css: `
                                left: 30px;
                                top: 20px;
                                color: lightblue;
                                --bg: linear-gradient(rgba(100,140,50,.15),rgba(100,140,50,.45));
                        `,
                        player_css: `
                                bottom: 50px;
                                left: 100px;
                                --ww: 400px;
                        `,
                        pinpu: { size: 1, gap: 1, color1: 'rgba(20,20,100,.5)', color2: 'snow'},
                });
        };
        Array.from({length: 50}).forEach((item) => {
                item = document.createElement('li-zi');
                let size = 15 + Math.ceil(Math.random() * 20);
                item.style.cssText += `
                        --dur: ${20 + Math.random() * 10}s;
                        --delay: -${Math.random() * 20}s;
                        width: ${size}px;
                        height: ${size}px;
                        left: ${Math.random() * 100}%;
                        background: #${Math.random().toString(16).substr(-6)};
                `;
                papa.appendChild(item);
        });
})();

</script>

马黑黑 发表于 2023-8-29 08:14

代码
<style>
        #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; }
        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); }
        @keyframes fly { to { top: -100%; } }
</style>

<div id="papa"></div>
<audio id="aud" crossorigin="anonymous" src="https://yinpin.s3-us-east-1.ossfiles.com/lyria.mp3" autoplay></audio>

<script>
       
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/xyosc_lrc.js';
        script.charset = 'utf-8';
        document.head.appendChild(script);
        let geci = [ , ];
        script.onload = () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: geci,
                        lrc_css: `
                                left: 30px;
                                top: 20px;
                                color: lightblue;
                                --bg: linear-gradient(rgba(100,140,50,.15),rgba(100,140,50,.45));
                        `,
                        player_css: `
                                bottom: 50px;
                                left: 100px;
                                --ww: 400px;
                        `,
                        pinpu: { size: 1, gap: 1, color1: 'rgba(20,20,100,.5)', color2: 'snow'},
                });
        };
        Array.from({length: 50}).forEach((item) => {
                item = document.createElement('li-zi');
                let size = 15 + Math.ceil(Math.random() * 20);
                item.style.cssText += `
                        --dur: ${20 + Math.random() * 10}s;
                        --delay: -${Math.random() * 20}s;
                        width: ${size}px;
                        height: ${size}px;
                        left: ${Math.random() * 100}%;
                        background: #${Math.random().toString(16).substr(-6)};
                `;
                papa.appendChild(item);
        });
})();

</script>

马黑黑 发表于 2023-8-29 08:25

本帖最后由 马黑黑 于 2023-8-29 08:34 编辑

插件的参数配置中，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'},

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

马黑黑 发表于 2023-8-29 08:27

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

亦是金 发表于 2023-8-29 09:44

这个频谱好看！我喜欢！谢谢马黑黑老师分享代码！{:4_176:}

红影 发表于 2023-8-29 09:47

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

红影 发表于 2023-8-29 09:51

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

红影 发表于 2023-8-29 10:03

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

嗯嗯，这个新效果是带命名的呢{:4_173:}

红影 发表于 2023-8-29 10:04

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

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

跑去pencilcode里看了看随机色效果，也很好看呢{:4_187:}

马黑黑 发表于 2023-8-29 12:04

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

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

马黑黑 发表于 2023-8-29 12:05

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

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

醉美水芙蓉 发表于 2023-8-29 12:06

马黑黑 发表于 2023-8-29 12:07

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

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

马黑黑 发表于 2023-8-29 12:08

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

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

马黑黑 发表于 2023-8-29 12:09

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

{:4_191:}

马黑黑 发表于 2023-8-29 12:09

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

还好吧

红影 发表于 2023-8-29 14:04

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

不透明也好，更退出频谱呢{:4_187:}

红影 发表于 2023-8-29 14:05

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

是的，其实文件名就是给它命名了呢{:4_187:}

红影 发表于 2023-8-29 14:05

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

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

红影 发表于 2023-8-29 14:06

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

黑黑最厉害了，想弄什么肯定弄得出的{:4_199:}

查看完整版本: Lyria