Audio Visualizer

How sound becomes a picture

Sound is a wave: air pressure rising and falling thousands of times a second. To draw it, the browser's Web Audio API captures that wave as a stream of numbers and hands it to an AnalyserNode, a built-in processor that can describe the sound in two complementary ways. One way is the raw waveform over time — the up-and-down shape itself. The other is the frequency spectrum: how much energy sits at each pitch, from deep bass to high treble. This visualizer reads both every frame and paints them onto an HTML canvas, redrawing roughly 60 times a second so the picture dances in step with the audio.

The FFT, in plain terms

The spectrum comes from a Fast Fourier Transform (FFT), a classic algorithm that decomposes a complex wave into the pure tones that add up to it. This tool sets fftSize = 256, which yields 256 ÷ 2 = 128 frequency "bins." Each bin covers a slice of the audible range and reports a loudness value from 0 to 255. In Bars mode, every bin becomes one vertical bar — taller bars mean more energy at that pitch — so a thumping bass line lights up the bars on the left while a cymbal crash flares the ones on the right.

To keep the motion from looking jittery, the analyser applies smoothingTimeConstant = 0.8. That means each frame's value is blended heavily with the previous frame, so bars glide rather than flicker. A higher smoothing value looks calmer; a lower one reacts faster but twitchier. The 0.8 setting is a deliberate middle ground that reads well for music.

The three modes, and what each actually shows

• Bars plots the 128 frequency bins as a left-to-right bar chart. This is the "graphic equalizer" look and the best mode for seeing which frequencies dominate a track.
• Waveform ignores frequency and draws the time-domain signal instead — the literal shape of the pressure wave, centered on a midline. A loud passage swings far from center; silence is a flat line. This is the oscilloscope view.
• Radial takes the same 128 frequency bins as Bars but wraps them around a circle, each bar shooting outward from a central ring. The result is a pulsing starburst that reacts to the whole spectrum at once.

A subtle detail makes all three feel fluid: instead of wiping the canvas to black each frame, the tool paints a semi-transparent dark rectangle over the previous frame. Old shapes fade out gradually, leaving faint motion trails.

Microphone vs. file: a worked walkthrough

Choose Use Microphone and the browser asks permission, then opens a live input stream via getUserMedia. Speak, clap, or play music near the mic and the bars respond instantly — there is no playback, just analysis of whatever the mic hears. Choose Upload Audio File instead and the tool loads your file into an in-memory audio element. Because file mode routes the sound to your speakers as well as the analyser, you press Play to hear it and see it together; Pause and Stop behave as you'd expect. Any format your browser can decode works — typically MP3, WAV, OGG, AAC, and FLAC.

Practical tips

• Mic mode usually needs HTTPS. Browsers only grant microphone access on secure pages, which this site uses. If the prompt never appears, check that another app hasn't already claimed the mic.
• Bars look "front-loaded" — that's normal. Most musical energy lives in the lower frequencies, so the left side of the spectrum is almost always busier than the right. It is the physics of music, not a bug.
• Try Waveform on a sine tone vs. a song. A pure tone draws a clean repeating curve; a full mix looks chaotic. It is a great way to see the difference between a simple and a complex sound.
• Pick a theme for contrast, not just looks. Neon and Sunset pop against the dark canvas; Mono is the clearest for actually reading bar heights.

Common mistakes

• Expecting Stop to keep your file loaded. Stop fully tears down the audio context and disconnects the source. To start again, press Play (for a still-loaded file) or re-upload.
• Confusing Bars with Waveform. They look superficially similar but answer different questions — Bars is "which pitches," Waveform is "what shape over time." Don't read frequency into the waveform view.
• Cranking the mic volume. Clipping a loud input pins every bar to the top and loses all detail. Keep the source at a comfortable level.

Is my audio private?

Yes. All decoding and analysis happen on your device through the Web Audio and Canvas APIs. Microphone input is never recorded, and uploaded files are read into memory locally — no audio is uploaded to any server. The permission prompt is a browser security requirement, not a sign that data is leaving your computer.