论坛 › 欢乐水吧 › 天籁森林（学习黑黑小球频谱关联）

红影 发表于 2022-12-4 11:42

天籁森林（学习黑黑小球频谱关联）

<style>
#papa { margin: 120px 0 0 calc(50% - 681px); position: relative; width: 1200px; height: 640px; overflow: hidden; background: #0b1a3a; box-shadow: 8px 4px 32px 0 hsla( 0,0%,0%,.72); user-select: none; }
#tu { position: absolute; left: 0px; top: -200px;opacity: 1; }
#tit { position: absolute; left: 0; top: 0; padding: 10px 16px; font: bold 2em sans-serif; color: lightgreen; text-shadow: 1px 2px 4px #000; animation: fly 40s infinite alternate linear; transition: color .5s; }
#tit:hover { color: green; }
@keyframes fly { to { left: 860px; } }
</style>

<div id="papa">
<img id="tu" src="http://image.hnol.net/c/2017-05/10/17/201705101721504161-2127595.jpg" alt="" />
        <span id="tit">天籁森林</span>
</div>
<audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1670124847965681.mp3" autoplay loop crossorigin="anonymous"></audio>

<script>
(function(mkPlayer) {let defaults = { size: 20,player_css: 'left: 50%; transform: translateX(-50%);',playerCode: `<style>#mplayer { --ww: 46%; position: absolute; width: var(--ww); height: 260px; cursor: pointer; left:360px; }.ball { --hh: 15px; position: absolute; border-radius: 50%; transition: .15s; }.ball::before { position: absolute; content: ''; width: 2px; height: var(--hh); left: calc(50% - 1px); top: 100%; background: linear-gradient(hsla(0,0%,90%,.55),transparent); transform-origin: 50% 0; }</style><div id="mplayer"></div>,`};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);let ballSize = data.size;papa.innerHTML += data.playerCode;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();(function () {let gap = 2;let maWidth = mplayer.offsetWidth;let total = Math.round(maWidth / (ballSize + gap + 1));if(total % 2 != 0 ) total -= 1;console.log(total);let audCtx = new AudioContext();let audSrc = audCtx.createMediaElementSource(aud);audSrc.crossorigin = 'anonymous';let analyser = audCtx.createAnalyser();audSrc.connect(analyser);analyser.connect(audCtx.destination);mplayer.style.cssText += `bottom: ${ballSize + gap}px;`;for(j=0; j<total; j++) {let el = document.createElement('span');let xx = j%2 === 0 ? maWidth/2 + (ballSize + gap) * j / 2 : maWidth/2 - (ballSize + gap) * (j-1) / 2 - ballSize;el.className = 'ball';el.style.cssText += `width: ${ballSize}px; height: ${ballSize}px; left: ${xx}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))`;mplayer.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 = mplayer.offsetHeight - a8h/2 + 'px';balls.style.setProperty('--hh',a8h/2 + 'px');}window.requestAnimationFrame(draw);})();})
();};mkPlayer.HCPlayer = playCode;})(this);
HCPlayer({size: 20});
</script>

红影 发表于 2022-12-4 11:44

套用一个，感谢黑黑的代码。看看字体颜色和帖子倒也合适，索性直接用了。谢谢黑黑@马黑黑{:4_187:}

红影 发表于 2022-12-4 11:46

图片来自不语分享的国家地理那贴的104楼，连图片都不用上传了，省力。谢谢不语@闲言不语{:4_173:}

https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=65011&pid=1792501&fromuid=2

红影 发表于 2022-12-4 11:47

这帖子最方便，图片现成的，找个音乐替换就完了，还有我这么偷懒的人，笑喷了{:4_189:}

马黑黑 发表于 2022-12-4 11:59

人迹罕至大自然的美，美不胜收

红影 发表于 2022-12-4 14:19

马黑黑 发表于 2022-12-4 11:59
人迹罕至大自然的美，美不胜收

是啊，看到这张图图的时候就觉得很喜欢，感觉可以拿来做帖子{:4_173:}

樵歌 发表于 2022-12-4 14:24

师妹动作真快，不愧是学霸。{:4_173:}

马黑黑 发表于 2022-12-4 14:38

红影 发表于 2022-12-4 14:19
是啊，看到这张图图的时候就觉得很喜欢，感觉可以拿来做帖子

当然可以，音乐也配套，天衣无缝

闲言不语 发表于 2022-12-4 15:11

红影 发表于 2022-12-4 11:46
图片来自不语分享的国家地理那贴的104楼，连图片都不用上传了，省力。谢谢不语@闲言不语

htt ...

说过8k7，俺这是真正的原始森林！{:4_397:}

梦油 发表于 2022-12-4 15:59

林木幽深、古树参天、随着缓坡徐徐上升、视野所及、一片绿洲。这幅图好美啊。

红影 发表于 2022-12-4 16:36

樵歌 发表于 2022-12-4 14:24
师妹动作真快，不愧是学霸。

都是现成的啊，连图片都不用上传。不语分享专区里有个帖子，里面好多好看的图图，可有右键直接取地址的，师兄也去看看，用那的图图不用上传{:4_173:}

红影 发表于 2022-12-4 16:37

马黑黑 发表于 2022-12-4 14:38
当然可以，音乐也配套，天衣无缝

又省力又好看，何乐而不为{:4_173:}

红影 发表于 2022-12-4 16:39

闲言不语 发表于 2022-12-4 15:11
说过8k7，俺这是真正的原始森林！

那里面还有好多漂亮图图呢，我准备继续搬了，不语那个帖子里的好图太多了{:4_205:}

红影 发表于 2022-12-4 16:39

梦油 发表于 2022-12-4 15:59
林木幽深、古树参天、随着缓坡徐徐上升、视野所及、一片绿洲。这幅图好美啊。

从不语的帖子里捞的，哈哈，看到这张图的第一眼就觉得喜欢{:4_173:}

马黑黑 发表于 2022-12-4 17:11

红影 发表于 2022-12-4 16:37
又省力又好看，何乐而不为

{:4_191:}

梦油 发表于 2022-12-4 17:14

红影 发表于 2022-12-4 16:39
从不语的帖子里捞的，哈哈，看到这张图的第一眼就觉得喜欢

是挺好的，你有独到的审美眼光。

红影 发表于 2022-12-4 18:02

梦油 发表于 2022-12-4 17:14
是挺好的，你有独到的审美眼光。

只是合了心意了，审美还谈不上，我审美其实挺差的呢{:4_173:}

红影 发表于 2022-12-4 18:02

马黑黑 发表于 2022-12-4 17:11


这下图片来源有了，我还有好多个封装还没做呢{:4_173:}

马黑黑 发表于 2022-12-4 19:14

红影 发表于 2022-12-4 18:02
这下图片来源有了，我还有好多个封装还没做呢

你得感谢人家

红影 发表于 2022-12-4 20:03

马黑黑 发表于 2022-12-4 19:14
你得感谢人家

也感谢黑黑，我是组装工，把不语的图图和黑黑的代码组装到一起了{:4_189:}

查看完整版本: 天籁森林（学习黑黑小球频谱关联）