论坛 › 音乐沙龙 › 瑶族舞曲

马黑黑 发表于 2023-8-26 22:27

瑶族舞曲

<style>
        #papa { margin: 0 0 0 calc(50% - 593px); 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; }
        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); }
        @keyframes drop { to { top: -100%; } }
</style>

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

<script>
       
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/xypp_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: 26px;
                                --ww: 500px;
                                --color1: purple;
                                --color2: lightblue;
                                --track: #aaa;
                        `,
                        pinpu: { size: 4, gap: 1},
                });
        };
        Array.from({length: 50}).forEach((item) => {
                item = document.createElement('li-zi');
                let size = 10 + Math.ceil(Math.random() * 10);
                item.style.cssText += `
                        --dur: ${10 + Math.random() * 10}s;
                        --delay: -${Math.random() * 10}s;
                        width: ${size}px;
                        height: ${size}px;
                        left: ${Math.random() * 100}%;
                        background: #${Math.random().toString(16).substr(-6)};
                `;
                papa.appendChild(item);
        });
})();

</script>

马黑黑 发表于 2023-8-26 22:29

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

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

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

<script>
       
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/xypp_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: 26px;
                                --ww: 500px;
                                --color1: purple;
                                --color2: lightblue;
                                --track: #aaa;
                        `,
                        pinpu: { size: 4, gap: 1},
                });
        };
        Array.from({length: 50}).forEach((item) => {
                item = document.createElement('li-zi');
                let size = 10 + Math.ceil(Math.random() * 10);
                item.style.cssText += `
                        --dur: ${10 + Math.random() * 10}s;
                        --delay: -${Math.random() * 10}s;
                        width: ${size}px;
                        height: ${size}px;
                        left: ${Math.random() * 100}%;
                        background: #${Math.random().toString(16).substr(-6)};
                `;
                papa.appendChild(item);
        });
})();

</script>

马黑黑 发表于 2023-8-26 22:30

本帖最后由 马黑黑 于 2023-8-26 23:02 编辑

配置其实一看就能明白，这里还是简单说一下吧——
一、频谱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

带进度条的响应式频谱，这个很漂亮啊{:4_199:}

红影 发表于 2023-8-26 22:56

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

马黑黑 发表于 2023-8-26 22:57

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

像一把梳子{:4_170:}

马黑黑 发表于 2023-8-26 23:03

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

大致如此，具体看二楼

醉美水芙蓉 发表于 2023-8-26 23:26

醉美水芙蓉 发表于 2023-8-26 23:28

醉美水芙蓉 发表于 2023-8-26 23:29

马黑黑 发表于 2023-8-26 23:52

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

{:4_196:}

马黑黑 发表于 2023-8-26 23:52

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

应该是

马黑黑 发表于 2023-8-26 23:52

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

果酱果酱

红影 发表于 2023-8-27 07:49

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

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

红影 发表于 2023-8-27 07:49

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

嗯嗯，看到的，我差不多猜对了{:4_173:}

梦油 发表于 2023-8-27 08:29

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

马黑黑 发表于 2023-8-27 10:20

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

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

马黑黑 发表于 2023-8-27 10:41

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

其实是分析对了

马黑黑 发表于 2023-8-27 10:42

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

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

梦油 发表于 2023-8-27 10:43

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

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

查看完整版本: 瑶族舞曲