Audio Visualizer

Quick Tips for the Best-Looking Result

Features

Turning Sound Into Something You Can See

Underneath every style here is the same piece of Web Audio machinery — an AnalyserNode running a Fast Fourier Transform, which breaks a sound down into the individual frequency bands it's actually made of, dozens of times per second. A bar rising and falling isn't decorative; it's a direct visual reading of how much energy exists in that specific frequency range at that exact instant, which is why a bass-heavy drop visibly lights up the left side of a bar display while a cymbal crash lights up the right.

Waveform mode skips that frequency breakdown entirely and instead draws the signal's raw shape over time — the same thing an oscilloscope shows, and the same underlying data a guitar tuner or pitch detector reads to figure out what note is playing. Frequency-based and time-based views are genuinely two different windows onto the same sound, not the same information redrawn differently.

Two Sources, One Canvas

Switching between microphone and file input changes more than what's making the sound — it changes how the audio is allowed to flow. Microphone input feeds the analyser and nothing else, deliberately never routed back out to your speakers, because playing a live mic signal back through the same speakers it's being picked up by causes audio feedback. An uploaded file has no such restriction, so it's routed to both the analyser and your actual speaker output, which is why you hear a file playing normally but never hear your own microphone echoed back.

Switching sources mid-session is deliberately seamless rather than requiring a full page reload — stopping the microphone and picking a new file, or the reverse, reuses the same underlying audio analysis setup rather than tearing everything down and rebuilding it. The one thing that does need to stay fixed once picked is the file itself: swapping in a different track updates the same playback element in place instead of creating a brand-new one for every file you try, which is also why loading a second or third file during the same session is instant rather than needing to re-request anything.

Four Shapes for the Same Signal

All four styles read from the identical analyser output — the visual differences come entirely from how that data gets arranged, not from any difference in what's being measured. Bars is the familiar equalizer layout everyone already recognizes from decades of stereo displays and media players. Mirror takes that same layout and reflects it symmetrically above and below center, which tends to look more balanced and less "left-heavy" for bass-driven music. Circular bends the same left-to-right progression around a full circle, trading familiarity for visual drama — it's frequently the style that reads best in a recorded video specifically because it fills the frame more completely than a row of bars sitting at the bottom.

Recording What You're Watching

Record Video works by capturing the canvas element's own pixel stream directly — genuinely reading whatever is actually being drawn, frame by frame, rather than re-rendering the animation separately for export. That video stream is combined with a real audio stream captured from whichever source is active, so the resulting file is a complete, synced video with sound, not a silent animation you'd need to add music to separately afterward. It downloads as a standard WebM file the moment you stop recording, ready to drop into a video editor or share directly.

Who Actually Watches Sound, and How

Musicians and producers use it to spot-check a mix — a track that looks visually unbalanced in the bar display, with almost nothing happening on one side, often has a real frequency-balance problem worth investigating further. Streamers and video editors use the recording feature to generate a quick, audio-reactive visual for a track that doesn't have an official music video. Teachers use waveform and frequency views as a visual aid for explaining pitch, harmonics and frequency to students who've never seen sound represented as anything other than an abstract idea. And plenty of people simply leave it running because a good spectrum display genuinely looks good.

A podcaster checking mic levels before recording switches to Waveform mode specifically, since a flat, barely-moving line makes a too-quiet input obvious at a glance in a way a bar chart doesn't communicate as clearly — then moves the actual recording itself to the Audio Recorder once levels look right. A producer wrapping up a finished track instead switches to File mode, uploads the mix, picks Circular with the Sunset theme, and records a 90-second clip to post as a teaser — the same underlying analysis, used for a completely different purpose.

What a Visualizer Doesn't Measure

A spectrum display is genuinely useful for spotting obvious problems and adding a visual layer to sound, but it isn't a calibrated measurement tool — it can't tell you a track's exact decibel level, whether it meets a loudness standard for streaming platforms, or give you the kind of precise numeric readout mastering engineers rely on specialized metering software for. Treat what you see here as a genuinely accurate relative picture of a sound's energy across frequency and time, not as a substitute for actual audio measurement tools when that level of precision matters.

It's also worth remembering that what you're watching is genuinely dependent on the listening chain around it — a laptop's built-in microphone rolls off bass frequencies a dedicated condenser mic wouldn't, and a phone speaker simply can't reproduce sub-bass content the same way studio monitors do, both of which visibly change what shows up on screen even when the underlying source audio is identical. The display is an honest reflection of what actually reached the analyser, not necessarily of the original recording in some idealized, chain-independent sense.