Real-time bars
An AnalyserNode reads live frequency data, redrawn on canvas every animation frame.
Audio Spectrum Bar Visualizer
Upload an audio file or use your microphone to watch a live, colorful frequency bar spectrum react to the sound in real time.
Upload an audio file, or switch to microphone mode, to see the live spectrum.
0:00 / 0:00
File or microphone
Visualize an uploaded track or switch to your microphone for live sound.
Private by design
Audio is analyzed entirely in your browser. Nothing is uploaded or recorded.
How to use the spectrum visualizer
This free online spectrum bar visualizer analyzes audio in real time and draws a bar for each frequency band, tall bars for loud frequencies and short bars for quiet ones.
- Pick a sourceUpload an audio file, or switch to microphone mode and allow access.
- Start it playingPress play for a file, or start the microphone to begin analyzing live sound.
- Watch the spectrumBars redraw on every animation frame, reacting instantly to bass, mids, and highs.
How the spectrum bars are drawn
An AnalyserNode sits in the audio graph between the source and the output. On every animation frame, getByteFrequencyData reads the current amplitude of many frequency bands, which are mapped to bar heights and colors on a canvas.
Frequency bands, not time
Unlike a waveform, each bar represents a range of frequencies rather than a moment in time, so the display shows the tonal balance of the sound as it plays.
Gradient coloring
Bar color blends from the site's accent color at low amplitude to the primary color at high amplitude, giving a quick visual read of loudness per band.
File or live input
The same analyser and drawing loop work whether the source is a decoded audio file playing back or a live MediaStream from your microphone.
Common use cases
Spectrum visualizers like this are used for music streams and practice sessions, checking mix balance, testing microphones, and visual audio demos.
Spectrum visualizer FAQ
Quick answers about how the bars work, microphone access, and privacy.
How does the spectrum visualizer work?
An AnalyserNode from the Web Audio API extracts frequency-domain data from the audio signal, and the bars are redrawn on canvas on every animation frame using getByteFrequencyData.
Can I use my microphone instead of a file?
Yes. Switch to microphone mode and allow microphone access to visualize live sound from your mic instead of an uploaded file.
What happens if I deny microphone access?
The tool shows a clear message explaining that access was denied and how to re-enable it in your browser's site settings, without breaking the rest of the page.
What audio formats are supported for upload?
Any format your browser's Web Audio API can decode, including MP3, WAV, M4A and OGG.
Is my audio or microphone data uploaded anywhere?
No. All decoding, analysis and rendering happens locally in your browser. Nothing is recorded, saved or sent to a server.