Audio Visualizer — 8 Reactive WebGL Scenes

It runs a Fourier transform on short slices of the incoming sound and reads the result as a set of frequency bands — each bar or ring is the energy in one band, not the loudness of the whole signal. That is why a bass drum lights the left end and a cymbal the right, and why a loud but narrow sound moves only part of the display. Two settings shape what you see more than the choice of style does: the number of bands, which trades detail against steadiness, and smoothing, which averages each band with its previous value so the picture does not flicker at the frame rate. Turn smoothing down and the display becomes twitchy and literal; turn it up and it flows but lags the beat.

Make sure you have allowed microphone access in your browser. Check that your microphone is not muted. Try increasing the sensitivity slider. If using a file, make sure the audio is playing.

Yes! Press S or click the Screensaver button. The visualizer enters fullscreen and automatically cycles through all 8 scenes every 30 seconds. Press Escape or click anywhere to exit.

Each scene is a GPU fragment shader, so it needs WebGL with hardware acceleration switched on — a black rectangle almost always means acceleration is off in the browser settings rather than a broken scene. Stutter is the other end of the same thing: fire and lava are the heaviest of the eight, so drop to a lighter scene, leave fullscreen, or close the other tabs competing for the same GPU.

Yes. Switch to Upload File mode and select any audio file (MP3, WAV, OGG, FLAC). The music plays through your speakers while the visuals react to it in real time.