Audio Visualizer — 15 Reactive WebGL Scenes

The sound is analyzed continuously in 32 frequency bands about 90 times a second, whatever the frame rate of your screen. Each band is compared with its own recent loud moments and with the background noise, so a quiet microphone and a loud file move the picture alike, while silence or room hiss keeps the scene calm and dim. Hits are detected separately — kick (bass drum), snare and hi-hats — and the beat is followed; the tempo lock lets go as soon as the music stops, so no pulses carry on in silence. The scenes turn the bass into size and large shapes, the highs into sparks and fine detail, and hits into bursts, ripples and lightning, while Waveform and Spectrum draw the real spectrum.

First allow microphone access in your browser. In silence the picture stays calm by design, so play music near the microphone or pick a file. If the music is barely louder than the room noise, move the source closer, turn it up, or raise the Sensitivity slider. With a file, press ▶ if the browser did not start playback by itself.

Yes! Press S or click the Screensaver button. The visualizer enters fullscreen and automatically cycles through all 15 scenes, one 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: Electric Storm and Lava Flow are the heaviest of the 15 scenes and Spectrum and Waveform the lightest, so switch to a lighter scene, turn off the cinematic post-FX (P), 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.

Pick a file and a scene and press Make a video: the page draws the whole song frame by frame at 30 frames per second and joins the picture with the song's sound in MP4 or WebM — 16:9 for YouTube, 9:16 for Reels, TikTok and Shorts, or square 1:1. Every frame is computed from the sound it plays over, so the flashes land exactly on the hits, and a slow graphics card makes the video take longer instead of dropping frames. The ● button records what the screen shows right now — it is there for the microphone.