清音玉露月牙泉
<style>#papa { margin: 0 0 0 calc(50% - 593px); position: relative; width: 1024px; height: 703px; background: #000 url('https://638183.freep.cn/638183/t22/webp/yyq.webp') 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/1670035560367175.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> 本帖最后由 梦油 于 2022-12-3 11:24 编辑
月牙泉的夜景好美啊！随着音乐跳动的小球球更为画面增色不少。这小球球就是播放器吧？ 梦油 发表于 2022-12-3 11:22
月牙泉的夜景好美啊！随着音乐跳动的小球球更为画面增色不少。这小球球就是播放器吧？
是的 前面一个效果还没做出来，黑黑又有新效果，这个用小球和细线来关联音乐，太美了{:4_199:} 红影 发表于 2022-12-3 11:41
前面一个效果还没做出来，黑黑又有新效果，这个用小球和细线来关联音乐，太美了
这个不用画布，效果弄不出那中艳丽来 黑黑这个太漂亮了{:4_178:} 这个也是要同域？ 黑黑这个同域，我音乐代码怎么去同呢？我要自己编辑代码上传过？ 小辣椒 发表于 2022-12-3 13:24
黑黑这个同域，我音乐代码怎么去同呢？我要自己编辑代码上传过？
同域不是必须的，若果同域，无需用代码处理。只有跨域才需要处理，前提是，资源是允许跨域操作的。
所谓同域，指网页和所引用的资源在同一个域名之下，目录可以不同。
马黑黑 发表于 2022-12-3 11:49
这个不用画布，效果弄不出那中艳丽来
又一种表现方式，非常漂亮呢。黑黑太厉害了，各种效果随手就来{:4_199:} 小辣椒 发表于 2022-12-3 13:22
这个也是要同域？
这个怎么会同域？花潮没有上传音乐的地方。 小辣椒 发表于 2022-12-3 13:21
黑黑这个太漂亮了
效果其实分左右两半，我用了盒子的反射（box-reflect）做左边那一半的效果。盒子反射是chromium独有的私有属性，非-webkit-的浏览器只能看到右边的效果。
如果采用盒子反射方式，我又写了一个兼容火狐的效果，已经测试通过。
不过反射不是必须的，有空我会考虑改善一下兼容性。 小辣椒 发表于 2022-12-3 13:22
这个也是要同域？
照这个代码，你只需上传音乐到你的空间，然后在哪了论坛都可以有效果。有个前提：你的空间不禁止跨域操作，若禁止，没有办法。 红影 发表于 2022-12-3 14:02
又一种表现方式，非常漂亮呢。黑黑太厉害了，各种效果随手就来
各种调度还不理想，还有兼容性 马黑黑 发表于 2022-12-3 11:33
是的
我来到花潮，从黑黑先生这里也学了一点点东西，很少很少。年纪大了，脑子也迟钝了。 漂亮的夜景，感谢老师的分享！{:4_185:} 梦缘 发表于 2022-12-3 16:15
漂亮的夜景，感谢老师的分享！
感谢支持 梦油 发表于 2022-12-3 14:45
我来到花潮，从黑黑先生这里也学了一点点东西，很少很少。年纪大了，脑子也迟钝了。
俺自己的方式玩玩，开心就好的 马黑黑 发表于 2022-12-3 16:58
俺自己的方式玩玩，开心就好的
是的，我在这里很开心，谢谢你和朋友们 。 梦油 发表于 2022-12-3 17:42
是的，我在这里很开心，谢谢你和朋友们 。
我们也感谢你给我们带来的知识与幽默，还有智慧与经验