爱如莲花（学习黑黑音频效果）
<style>#papa { margin: 0 0 0 calc(50% - 733px); position: relative; width: 1310px; height: 766px; top:150px;background: #000 url('https://yinhua.ru/20221203/0IF.gif ') no-repeat center/cover; box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); border-radius: 10px; border: 1px solid rgba( 255, 255, 255, 0.18 ); user-select: none; display: grid; place-items: center; overflow: hidden; }
#mama { position: absolute; right: calc(50% - 600px); bottom: 0; width: 600px; height: 260px; cursor: pointer; }
#mama::before { position: absolute; content: ''; width: 100%; height: 100%; left: -400px; }
.ball { --hh: 10px; position: absolute; border-radius: 50%; transition: .15s; }
.ball::before { position: absolute; content: ''; width: 2px; height: var(--hh); left: calc(50% - 1px); top: 24px; background: linear-gradient(lightblue,transparent); transform-origin: 50% 0; transform: rotate(5deg); }
</style>
<div id="papa">
<div id="mama"></div>
</div>
<audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1670056454611167.mp3" autoplay loop crossorigin="anonymous"></audio>
<script>
(function () {
let ballSize = 24;
let maHeight = mama.offsetHeight,maWidth = mama.offsetWidth;
let total = Math.round(maWidth / ballSize / 2);
let audCtx = new AudioContext();
let audSrc = audCtx.createMediaElementSource(aud);
audSrc.crossorigin = 'anonymous';
let analyser = audCtx.createAnalyser();
audSrc.connect(analyser);
analyser.connect(audCtx.destination);
mama.style.cssText += `-webkit-box-reflect: left -${ballSize}px; webkit-box-reflect: left -${ballSize}px`;
for(j=0; j<total; j++) {
let el = document.createElement('span');
el.className = 'ball';
el.style.cssText += `width: ${ballSize}px; height: ${ballSize}px; left: ${(ballSize+6)*j}px; background: linear-gradient(135deg,hsla(${Math.ceil(Math.random()*360)},${Math.round(Math.random()*100)}%,${Math.round(Math.random()*50)}%,.75),hsla(${Math.ceil(Math.random()*360)},100%,50%,.75))`;
mama.appendChild(el);
}
let voiceHeight = new Uint8Array(analyser.frequencyBinCount);
let balls = document.querySelectorAll('.ball');
(function draw() {
analyser.getByteFrequencyData(voiceHeight);
let step = Math.round(voiceHeight.length / total);
for (let j = 0; j < total; j++) {
let a8h = voiceHeight;
balls.style.top = mama.offsetHeight - a8h + 'px';
balls.style.setProperty('--hh',a8h + 'px');
}
window.requestAnimationFrame(draw);
})();
mama.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br> 异域情丝专辑里面的一首 爱如莲花，旧图加个效果看看@马黑黑 菇凉嫁人了新郎不是俺{:4_170:}但也必须稀饭{:4_173:} 马黑黑 发表于 2022-12-3 17:57
菇凉嫁人了新郎不是俺但也必须稀饭
哈哈~~黑黑要做几次新郎啊{:4_172:} 小辣椒 发表于 2022-12-3 17:59
哈哈~~黑黑要做几次新郎啊
这个多多益善{:4_205:} 这个漂亮，亲爱的这么快就做出来了，太美了{:4_199:} 听着音乐，看着身影移动，小球跳动，真是美好的享受{:4_199:} 马黑黑 发表于 2022-12-3 18:24
这个多多益善
原来比老头还厉害，老头后宫三千马上摆摊拍卖了{:4_170:} 红影 发表于 2022-12-3 19:19
这个漂亮，亲爱的这么快就做出来了，太美了
这个是套用速度是快的，修改还一下子不行 小辣椒 发表于 2022-12-3 20:11
原来比老头还厉害，老头后宫三千马上摆摊拍卖了
{:4_196:} 红影 发表于 2022-12-3 19:22
听着音乐，看着身影移动，小球跳动，真是美好的享受
都是以前的图图，现在可以用的就整理出来了 醉美水芙蓉 发表于 2022-12-3 20:10
小辣椒做得漂亮！
谢谢水芙蓉欣赏{:4_171:} 马黑黑 发表于 2022-12-3 20:13
{:4_172:}
开心一下 小辣椒 发表于 2022-12-3 20:11
这个是套用速度是快的，修改还一下子不行
喜欢的音乐，这制作也好美呢{:4_187:} 小辣椒 发表于 2022-12-3 20:13
都是以前的图图，现在可以用的就整理出来了
很美的，亲爱的真棒{:4_187:} 红影 发表于 2022-12-3 22:16
喜欢的音乐，这制作也好美呢
音乐我都是以前自己收藏的 红影 发表于 2022-12-3 22:17
很美的，亲爱的真棒
哈哈，别夸我，应该夸黑黑{:4_189:} 小辣椒 发表于 2022-12-3 22:19
音乐我都是以前自己收藏的
都是亲爱的自己喜欢的音乐吧{:4_187:} 小辣椒 发表于 2022-12-3 22:21
哈哈，别夸我，应该夸黑黑
都夸，黑黑的代码好，亲爱的做的也好{:4_187:}
页:
[1]
2