In a real app, the Web Audio API’s AnalyserNode.getByteFrequencyData() returns audio as an array of per-frequency-band energy (an FFT — Fast Fourier Transform — result), and each slot maps directly to one bar’s height — low indices are bass, high indices are treble. Since this site can’t use a microphone or audio file, it fakes "a plausible spectrum" instead by blending several sine waves with SimplexNoise: the bass band pulses slowly and hard with a sin(), the rest jitter with noise, and overall magnitude shrinks exponentially as the band index rises (Math.exp(-band*2.5)) — the same lows-are-big, highs-are-small shape real music spectra have.
All 28 bars are drawn with a single THREE.InstancedMesh (see instanced-mesh), so there’s one draw call. Every frame each instance’s transform (scaling dummy.scale.y for height) and color (mesh.setColorAt) get recomputed, then pushed to the GPU with mesh.instanceMatrix.needsUpdate = true and mesh.instanceColor.needsUpdate = true.
Hooking up real audio just means swapping this demo’s "fake spectrum" step for the result of analyser.getByteFrequencyData(dataArray) — the rendering pipeline carries over unchanged. Keep in mind browsers only let an AudioContext play after a user gesture like a click, so getByteFrequencyData won’t return real data before that.
When to use
Music player spectrum equalizers, live-stream overlays, or a "listening" indicator while waiting for speech input.