红影 发表于 2023-8-18 20:29

《清空》学习黑黑假频谱响应效果

<style>
#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 675px; background: url('https://pic.imgdb.cn/item/64df012e661c6c8e54cb06aa.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#pic { position: absolute; left: 260px; top: 320px; width: 680px; height: 360px; mix-blend-mode: multiply; -webkit-mask-image:radial-gradient(black 35%, transparent 70%); opacity: 0.95; z-index: 4; background: url('https://pic.imgdb.cn/item/64df53f4661c6c8e54d2961c.jpg'); animation: sh 6s infinite alternate var(--state);}
@keyframes sh { 0%,100%{ opacity: 1; } 50%{ top:310px; left:270px; opacity: 0.6; transform:skew(8deg,1deg);} }
#vid { position: absolute; width: 100%; height: 395px; top: 280px; object-fit: cover; clip-path: polygon(0% 7%, 13% 7%, 13% 6%, 25% 6%, 29% 0%, 100% 0%, 100% 100%, 0% 100%); pointer-events: none; mix-blend-mode: screen; z-index: 2; opacity: .65; }
</style>

<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2405811/00/16/27/5e9c626ccf77f_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="pic"></div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/04/29/1b3f21d8d689fb956ff2bc82d984ac29.mp3" autoplay></audio>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/xypinpu_lrc.js';
        script.charset = 'utf-8';
        document.head.appendChild(script);
        let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        ypData = ;
        script.onload = () => {
                HCPlayer({
                                papa: '#papa',
                                lrcAr: geci,
                                ypData: ypData,
                                lrc_css: 'color: lightblue; --bg: linear-gradient(180deg, hsla(300, 100%, 80%, .45), hsla(240, 100%, 50%, .75)); ',
                                player_css: '--ww: 100%; --hh: 200px; --color1: snow; --color2: blue; bottom: 366px;',
                                pinpu: {size: 4, gap: 1}, /* 频谱条宽度与彼此间间隔 */
                                fs_css: 'left: -100px; top: 10px; --color: #eee; --bg: #333;', /* 全屏按钮 */
                });
        };

})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

红影 发表于 2023-8-18 20:31

把视频按照沿着山的走向切了一下，觉得那个断面不好，就把频谱移上去了，然后下面就很空。弄一张图片在里面，用来表达情侣之间的爱很纠结吧{:4_173:}

红影 发表于 2023-8-18 20:32

感觉这个音乐波形响应还是很不错的啊@马黑黑{:4_187:}

梦油 发表于 2023-8-18 20:38

随着音乐跳动的线条很好看，也是整个画面有了很活跃的动感。

小辣椒 发表于 2023-8-18 20:45

亲爱的，新产品啊，速度的{:4_178:}

小辣椒 发表于 2023-8-18 20:45

一抹蓝，漂亮！{:4_199:}

小辣椒 发表于 2023-8-18 20:47

这个频谱也是用音波的，以前黑黑有分享过的那种？

小辣椒 发表于 2023-8-18 20:48

欣赏亲爱的精彩制作{:4_199:}

马黑黑 发表于 2023-8-18 20:59

红影 发表于 2023-8-18 20:32
感觉这个音乐波形响应还是很不错的啊@马黑黑

和实时获取的音波相比那就差太多，遗憾的是，目前很难找到支持跨域解读音波数据的资源

马黑黑 发表于 2023-8-18 21:00

小辣椒 发表于 2023-8-18 20:47
这个频谱也是用音波的，以前黑黑有分享过的那种？

对，做成了插件，需要提供音波数据，和歌词数组一样

焱鑫磊 发表于 2023-8-18 21:02

红影棒棒哒！{:4_187:}

山里人 发表于 2023-8-18 21:22

波形响应很不错的

醉美水芙蓉 发表于 2023-8-18 21:40

红影 发表于 2023-8-18 22:25

梦油 发表于 2023-8-18 20:38
随着音乐跳动的线条很好看，也是整个画面有了很活跃的动感。

这个是频谱，是黑黑的代码，我套用玩的{:4_173:}

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

小辣椒 发表于 2023-8-18 20:45
亲爱的，新产品啊，速度的

这个还得去做音波，比较麻烦点{:4_173:}

红影 发表于 2023-8-18 22:27

小辣椒 发表于 2023-8-18 20:45
一抹蓝，漂亮！

谢谢亲爱的鼓励{:4_187:}

红影 发表于 2023-8-18 22:28

小辣椒 发表于 2023-8-18 20:47
这个频谱也是用音波的，以前黑黑有分享过的那种？

是的，黑黑以前就弄过，现在是打包做成了插件。

红影 发表于 2023-8-18 22:28

小辣椒 发表于 2023-8-18 20:48
欣赏亲爱的精彩制作

抱抱，亲爱的身体不好还上来，太不容易了{:4_179:}

红影 发表于 2023-8-18 22:29

马黑黑 发表于 2023-8-18 20:59
和实时获取的音波相比那就差太多，遗憾的是，目前很难找到支持跨域解读音波数据的资源

那就不管它，就这样玩着也很不错啊{:4_187:}

红影 发表于 2023-8-18 22:30

焱鑫磊 发表于 2023-8-18 21:02
红影棒棒哒！
多谢焱鑫磊鼓励{:4_187:}
页: [1] 2 3 4
查看完整版本: 《清空》学习黑黑假频谱响应效果