Sound Analysis Tools
Pitch Detector Tools

🎵 Audio Visualizer

Visualization Canvas

Audio Player

Audio to Waveform Visualizer

Last updated: October 31, 2026 · Written by the Pitch Detectors Editorial Team

An audio visualizer turns sound into moving graphics in real time. Upload an MP3 or WAV, pick the Bars, Wave, or Circle style, and export a 60fps WebM video — right in your browser, with your file never leaving your device.

Key Takeaways

  • A waveform shows amplitude over time; a spectrum shows energy across frequencies — this tool does both, plus a radial style.
  • Visualization runs on the Web Audio API: a 2048-sample FFT split into frequency bins, smoothed and drawn on canvas at 60 fps.
  • Video export uses canvas.captureStream(60) + MediaRecorder to produce a WebM file with VP8/VP9 video and Opus audio.
  • Your audio is decoded locally — nothing is uploaded to a server.
  • WebM plays natively on YouTube, Chrome, and Discord; convert to MP4 for Instagram with free tools like HandBrake or FFmpeg.

What Is an Audio Visualizer?

An audio visualizer is software that converts an audio signal into animated graphics that move in sync with the sound, typically as a waveform, frequency spectrum bars, or a radial display. Musicians use visualizers to make music videos, podcasters use them to create audiograms — short captioned clips pairing audio with a moving waveform for social feeds — and DJs use them as live eye candy.

Unlike a static waveform image in an editor, a visualizer is reactive: every frame is computed from the actual audio playing at that moment. When the kick drum hits, the bass bars jump; when the vocal starts, the midrange lights up. That direct coupling is what makes the result feel alive rather than decorative.

How This Visualizer Works

This tool runs an end-to-end browser-native pipeline: decode → analyze → smooth → draw → record. Your file is decoded by the Web Audio API into raw PCM samples, then an AnalyserNode performs a Fast Fourier Transform on every frame of audio.

Methodology: FFT size is 2048 samples (1024 usable frequency bins), temporal smoothing defaults to 0.7, and the canvas redraws via requestAnimationFrame at 60 fps. For video export, canvas.captureStream(60) grabs the animation while a MediaStreamAudioDestinationNode taps the audio; MediaRecorder multiplexes both into WebM. Validation method: feed the tool a 440 Hz test tone and the spectrum peak should land in the bin nearest 440 Hz — a reproducible check anyone can run.

Last reviewed: October 2026. Pipeline follows the W3C Web Audio API and MediaRecorder specifications; see MDN Web Docs for reference.

FFT Bin Math and Worked Example

The FFT slices the frequency range into equal bins. Bin width is simply:

Bin width (Hz) = Sample rate ÷ FFT size

Worked example at CD quality (44,100 Hz sample rate, FFT size 2048):

  1. Bin width = 44,100 ÷ 2048 ≈ 21.53 Hz per bin
  2. A 440 Hz tone (A4) lands in bin 440 ÷ 21.53 ≈ bin 20
  3. The bass region 20–250 Hz spans only about 11 bins — which is why bass bars look chunky while treble looks smooth

Smoothing then tames flicker with an exponential moving average:

Pdisplay(t) = α × Pdisplay(t−1) + (1 − α) × Praw(t)

At α = 0.7 (this tool's default), bars attack fast on drum hits but decay gracefully — the classic VU-meter feel. Push α toward 0.9 for slow ambient washes; drop it toward 0.4 for hyper-reactive EDM.

TECHNICAL SPECIFICATION How FFT bin resolution shapes what you see. Suggested alt text: "Diagram of FFT frequency bins showing 21.53 Hz resolution per bin" INPUT CRITERIA Standard Parameters BASELINE SPECS DSP COMPUTATION Algorithmic Conversion IN-BROWSER DSP OPTIMAL OUTPUT Calibrated Value ACCURATE RESULT FFT frequency bins from 20 Hz to 20 kHz showing wide bass bins vs narrow treble resolution, wit
How FFT bin resolution shapes what you see. Suggested alt text: "Diagram of FFT frequency bins showing 21.53 Hz resolution per bin"

How to Use the Audio Visualizer

  1. Upload audio: click Choose File and pick an MP3, WAV, AAC, FLAC, or OGG file. It decodes locally — no upload wait.
  2. Press Play to start the live visualization on the canvas.
  3. Pick a style: Bars for the classic equalizer, Wave for the oscilloscope line, Circle for the radial burst.
  4. Set bar count (16–256, default 64): fewer bars look bold and chunky; more bars look detailed.
  5. Adjust smoothing (0–0.95, default 0.7): higher values calm flicker; lower values react harder.
  6. Pick a color for the bars, wave line, or radial arms.
  7. Tick "Include audio in video" if you want sound in the export (recommended for sharing).
  8. Click Generate Video: the tool replays your track while recording at 60 fps. Wait for the "Video Generated Successfully" status.
  9. Preview and download the WebM file with the Download Video button.

Reading Your Result: What the Visuals Tell You

The visuals are more than decoration — they reveal mix problems at a glance:

What you see What it means What to do
Waveform with flat tops Clipping — the signal exceeds 0 dBFS Lower the track gain and re-render before publishing
Only the lowest bars moving Bass-heavy mix; mids and highs are buried Check your mix balance or EQ
Thin, spiky wave with gaps Over-compressed or gated audio Ease off the limiter if it sounds lifeless
Asymmetric wave (taller on top) DC offset or phase issue Run a DC-offset removal pass in your editor
Full, even bars and wave Healthy, dynamic mix Nothing — export with confidence

Your Audio Never Leaves Your Browser

Most online visualizer tools upload your file to a server, render it in the cloud, and send back a video — your unreleased track sits on someone else's disk. This tool does everything with browser-native APIs: decoding, FFT analysis, canvas rendering, and MediaRecorder encoding all happen in your device's memory.

That architecture has three practical benefits: privacy (unreleased music stays yours), speed (no upload/download round trip — a 50 MB WAV starts visualizing instantly), and cost (no server rendering means the tool stays free with no watermark). You can verify it yourself: open your browser's network tab while generating a video and watch — no audio bytes leave the page.

From Export to Publish: Where Your WebM Plays

The tool exports WebM (VP8/VP9 video + Opus audio) — an open, high-quality format. But not every platform accepts it, so check this table before you post:

Platform / app WebM support Notes
YouTube Yes Upload directly; YouTube re-encodes anyway
Chrome, Edge, Firefox Yes Plays natively in the browser
Discord Yes Embeds and plays inline
Instagram / TikTok feed No Convert to MP4 (H.264) first
Video editors (Premiere, DaVinci) Varies Convert to MP4 if your editor refuses the import

To convert, use the free HandBrake (drag, drop, export MP4), VLC (Media → Convert/Save), or one FFmpeg command: ffmpeg -i input.webm -c:v libx264 output.mp4. Quality loss is negligible for social posting.

TECHNICAL SPECIFICATION Where your exported WebM plays. Suggested alt text: "Flowchart showing which platforms accept WebM video directly" INPUT CRITERIA Standard Parameters BASELINE SPECS DSP COMPUTATION Algorithmic Conversion IN-BROWSER DSP OPTIMAL OUTPUT Calibrated Value ACCURATE RESULT WebM file branching to platform icons — YouTube/Chrome/Discord marked "direct upload"
Where your exported WebM plays. Suggested alt text: "Flowchart showing which platforms accept WebM video directly"

Which Style for Which Content

Style Best for Why it works
Bars EDM/dance tracks, beat-driven promos Bass bars punch on every kick — maximum energy read at thumbnail size
Wave Podcast audiograms, voice clips The classic audiogram look; viewers instantly recognize it as "audio you can watch"
Circle Album-art backdrops, lo-fi streams Radial symmetry frames cover art beautifully and reads well as a loop

Limitations

  • WebM output only. Instagram and some editors need MP4 — convert after export (see above).
  • Not a loudness meter. Bar height shows relative FFT energy, not calibrated dB SPL or LUFS. For loudness, use our loudness meter.
  • Large files need memory. A 200 MB WAV decodes into RAM; very long files may stutter on low-end devices. Trim first with our audio trimmer.
  • 60 fps needs a capable GPU. On weak hardware the animation may drop frames; the exported video still records at 60 fps timing.
  • Format support varies by browser. All modern browsers decode MP3/WAV; FLAC and OGG support is broad but not universal — if a file won't load, convert it to WAV first.

Audio Visualizer vs Alternatives

Option Best for Drawback
This visualizer Fast, free, private waveform/spectrum videos WebM output; fewer design templates
Headliner / Wavve (cloud) Templated podcast audiograms with captions Uploads your audio; free tiers watermark or limit exports
After Effects + Trapcode Fully custom pro motion graphics Paid software with a steep learning curve

Frequently Asked Questions

It decodes your audio file in the browser with the Web Audio API, then runs a Fast Fourier Transform (FFT) on every frame to split the sound into frequency bins. Those bin values drive the canvas animation — bars, oscilloscope wave, or radial display — redrawn 60 times per second via requestAnimationFrame.

A waveform (time domain) plots amplitude against time, showing the physical shape of the sound — transients, clipping, and dynamics. A spectrum (frequency domain) plots energy against frequency, showing how much bass, midrange, and treble the sound contains at each moment. This tool offers both, plus a circular spectrum style.

The tool calls canvas.captureStream(60) to grab the animation as a 60fps video stream, taps the audio through a MediaStreamAudioDestinationNode, and feeds both into the MediaRecorder API. The result is multiplexed into a WebM file (VP8/VP9 video, Opus audio) entirely on your device — no server involved.

No. Decoding, analysis, rendering, and video encoding all happen locally with browser-native APIs. Your file never leaves your device, which also means unreleased tracks stay private and there is no upload wait — even a 50 MB WAV starts visualizing instantly.

Use the free HandBrake app (drag in the WebM, export as MP4), VLC's Convert/Save feature, or FFmpeg with the command ffmpeg -i input.webm -c:v libx264 output.mp4. You need MP4 for Instagram feed posts, TikTok uploads, and some video editors; YouTube, Chrome, and Discord accept WebM directly.

It controls an exponential moving average between raw FFT frames: higher values blend each new frame more with the previous one, so bars glide instead of flickering. At 0.7 (the default) you get punchy attacks with graceful decay; near 0.9 the motion turns slow and dreamy; near 0.4 it reacts violently to every transient.

Use the Wave style — it is the classic audiogram look that social audiences instantly recognize as listenable audio. Bars suit beat-driven music where bass movement sells the energy, and Circle works best as an ambient backdrop behind album art or a logo.

Because FFT bins are linear in frequency: at a 2048-sample FFT and 44.1 kHz, each bin spans about 21.5 Hz, so the entire 20–250 Hz bass range gets only ~11 bins while treble gets hundreds. It is a mathematical property of the FFT, not a bug — logarithmic binning would fix it but costs real-time performance.

Not in calibrated decibels. Bar height reflects relative FFT magnitude (0–255), which shows the shape of your mix but not absolute loudness. For real loudness numbers use our loudness meter (LUFS) or decibel meter; for checking clipping, the Wave view's flat tops are a reliable visual tell.

MP3, WAV, AAC, FLAC, and OGG decode in all modern browsers. If a file refuses to load, it is almost always an unusual codec variant — converting it to WAV first solves it. Very long files (over an hour) may strain low-memory devices, so trim them down first.

Note: this tool visualizes relative audio energy for creative purposes. It is not a calibrated loudness or sound-pressure meter — bar heights are not decibel readings.

Related tools: decibel meter for live SPL readings, loudness meter for LUFS mastering levels, microphone test to check your mic, audio trimmer to cut long files, and audio speed changer for tempo tweaks.