Audio Visualizer
An audio visualizer that splits whatever's playing into 1,024 frequency bands and draws each one as a bar, updated every frame.
Runs entirely in your browser — your files and text never leave your device.
Drag & drop your file here, or
Bars run low frequencies on the left to high on the right, and everything is drawn on your device — the audio is never uploaded.
How to use
- Pick an audio file or drag one onto the box. Whatever your browser can play, the visualizer can draw.
- Hit play on the player below the canvas. Bars only move while sound is actually coming out. Pause and the last frame freezes in place; let the track run to the end and the canvas resets to its 'Press play to see the spectrum' prompt.
About this tool
Load a track, press play, and the bars start moving. The left edge is the low end and the right edge is the treble; how tall a bar stands is how much energy that slice of the spectrum carries at that instant. Kick drums thump the far left. Hi-hats scatter along the right.
Behind the canvas is an FFT with a window of 2,048 samples, which yields 1,024 bars. At the 48 kHz rate most machines run at, each bar covers roughly 23 Hz, and the right-hand edge sits near 24 kHz.
The axis is linear, which is worth knowing before reading too much into the picture. Everything under 1 kHz, which is most of what anyone would call the musical part of a mix, is crammed into the leftmost four percent of the canvas. The rest of the width belongs to the highs. That is why a bass-heavy track looks like a wall on the left and a thin haze across everything else.
Bars are smoothed frame to frame so the picture does not strobe. Turn on reduced motion at the system level and the smoothing climbs further, which makes the whole thing noticeably calmer to watch.
I built it mostly to have something to point at. Describing what a bass drop does to a spectrum is hard. Showing someone takes four seconds. Run a pure tone from the Tone Generator through it once and the axis clicks into place: one spike, one position, sliding as you change the frequency.
Good to know
- No microphone input. It reads a file through the player and nothing else, so for a live check that your mic is picking up sound, the Voice Recorder's input meter is the right tool.
- Nothing is saved. The canvas is painted frame by frame with no recorder behind it, and there is no way to export the animation as a video or even a still. Screen capture is the workaround people use.
Things people ask
What are the bars actually measuring?
Loudness per frequency band, refreshed every frame. The analyser hands back 1,024 numbers between 0 and 255, one per band, and each becomes a bar. Tall bars mark whichever frequencies are loudest at that exact moment.
Why do loud parts flatten out along the top?
The scale runs from -100 dBFS at the floor to -30 dBFS at the ceiling, which are the Web Audio defaults this tool leaves untouched. Push a band past -30 dB and its bar sticks to the top edge with nowhere left to go. A loud modern master spends a good deal of its time up there.
Can I visualize my microphone instead of a file?
Not on this page. The graph is wired straight off the audio element, so there is no path in for a live input. The Voice Recorder shows a real-time level meter while it captures, which covers the usual reason people ask.
Can I record the visualization for a video?
There is no export here. What you see is painted to a canvas and discarded just as fast. People building stream overlays generally capture the window with OBS or their operating system's own screen recorder.
Why does my old MP3 look empty above a certain point?
Because it probably is empty up there. Lossy encoders discard the top of the spectrum first, and a 128 kbps MP3 is often cut off somewhere around 16 kHz. That flat stretch on the right is a genuine hole in the file.
Missing something in Audio Visualizer? Suggest a feature →