Audio Visualizer
Visualize sound from your microphone in real-time
Controls
Click "Start Microphone" and allow microphone access to begin visualization.
Turn sound into something you can see. This tool reads your microphone in real time and paints it onto a canvas as a moving waveform, a bank of frequency bars, or a radial pattern. It runs entirely through the Web Audio API in the browser: the audio is analyzed frame by frame and discarded, never recorded or uploaded. It is useful for checking that a microphone works, for watching pitch and dynamics during practice, and for showing what frequency and amplitude actually mean.
How to Use
- Start: Click Start Microphone and accept the browser’s permission prompt.
- Make sound: Speak, sing, clap, or hold an instrument near the mic.
- Switch modes: Use the Mode dropdown to move between Waveform, Frequency Bars, and Circular.
- Change color: Pick one of eight presets from the Color dropdown; it applies live.
- Stop: Click Stop Microphone to release the device. The canvas clears.
Time Domain vs Frequency Domain
Every sound can be described two ways, and the visualizer exposes both. The time-domain view is the raw air-pressure signal: a graph whose horizontal axis is time and whose vertical axis is amplitude. Loud moments spike away from the center line; silence is a flat line. This is exactly what an oscilloscope shows, and it is the best view for seeing clipping, plosives, and the overall envelope of a phrase.
The frequency-domain view answers a different question: of all the pitches in the air right now, how much energy is in each one? To produce it, an analyser node runs a Fast Fourier Transform on the incoming samples. With an FFT size of 2048, the transform yields 1024 bins, each covering a slice of the spectrum. A kick drum lights the low bins on the left; a cymbal or sibilant “s” lights the high bins on the right; a speaking voice fills the middle. The analyser uses a smoothing constant of 0.8, blending each frame with the last so the display moves fluidly rather than jittering.
Reading the Three Modes
- Waveform: A glowing line traced across the canvas. Use it to judge volume and to spot clipping, where peaks flatten against the top or bottom edge.
- Frequency Bars: Vertical bars rising from the bottom, one per frequency bin, with a gradient toward the peak. Use it to compare registers and to see how a mix is balanced.
- Circular: Dots arranged around a ring, each pushed outward in proportion to its bin’s energy. It reads like a radar sweep and makes stereo-like movement and bass hits easy to see.
What Different Sounds Look Like
- A clap is a nearly vertical spike on the waveform and a brief flash across many bars at once, because a sharp transient contains energy at almost every frequency.
- A whistle produces a single bright bar that slides left and right as the pitch changes, with the rest of the spectrum quiet.
- A kick drum sends the leftmost bars surging and makes the waveform dip deeply, but barely touches the treble bins.
- A sustained “oo” concentrates the bars in the lower middle, while a sharp “ee” pushes them noticeably higher; switching between the two on the same breath is a compact demonstration of formants.
- A room fan shows up as a low, steady hum in the frequency bars long before you consciously notice the noise.
Choosing a Color Scheme
The eight presets exist mostly so the display stays visible against different backdrops. Green and teal read well on the default dark canvas; yellow and pink are brighter choices for recording or streaming; ocean blue and lavender are calmer. Because each mode uses the color differently — a stroke for the waveform, a vertical gradient for the bars, filled dots for the circle — the same preset can look quite different between modes. Changing color does not interrupt analysis, so it is safe to experiment while sound is playing.
Microphone Troubleshooting
- No movement at all: Confirm the browser tab has the mic permission, then check the OS input device. A muted hardware switch on a headset is a frequent cause.
- Movement only when shouting: Move closer, or raise the input gain in the operating system. The visualizer shows what the mic delivers, not a boosted version.
- Waveform pinned flat at the top and bottom: The input is too loud and clipping. Back away or lower the gain; a clipped signal is already distorted before it reaches the analyser.
- Bars barely move in the high range: That is normal for low-frequency instruments and male voices, which carry most of their energy in the lower bins.
- Permission denied: The page will show a red message. You must allow the microphone in the browser’s site settings and reload before it can access the device.
What It Does Not Do
The tool does not record, save, download, or transmit audio, and it has no file-import option, so it cannot analyze an existing recording. It is a live microphone viewer, not an editor or a spectrum analyzer with numeric readouts. Values are drawn for visual effect, not printed as calibrated decibels or hertz, so use dedicated measurement software if you need exact figures. It also does not separate sources: everything reaching the microphone is summed into one signal.
Related Tools
Frequently Asked Questions
Does the visualizer listen through the microphone or can I load an audio file?
It listens through your microphone only. There is no file picker and no audio upload; the page calls getUserMedia for microphone access and feeds that live stream into the Web Audio API. To visualize a song you would need to play it through speakers near the mic rather than load the file.
What is the difference between the waveform and frequency bar modes?
Waveform shows the time domain: amplitude plotted left to right as the signal moves, like an oscilloscope. Frequency Bars show the frequency domain: the energy present in each band at this instant, with bass on the left and treble on the right. The first tells you how loud the shape is; the second tells you which pitches make it up.
What analyser settings does the visualization use?
The analyser is created with an FFT size of 2048, which yields 1024 frequency bins, and a smoothing constant of 0.8. Smoothing averages each frame with the previous one, so the bars glide instead of flickering. The canvas itself is 800 by 400 pixels and scales to the page width.
Why is the display flat even after I press start?
The microphone may be muted, the wrong input device may be selected, or the room may simply be quiet. Watch the browser's microphone indicator and check the input device in your operating system settings; laptops often keep the built-in mic active even after a headset is connected. Speaking directly into the mic should produce an immediate response.
How many color schemes can I choose from?
Eight presets: green, coral red, teal, yellow, lavender, pink, ocean blue, and magenta. The color applies to the waveform stroke, the bar gradient, or the circular dots, and you can change it while the visualization is running without stopping the microphone.
Does pressing stop really turn the microphone off?
Yes. The stop action disconnects the audio source, cancels the animation frame, and closes the AudioContext, which releases the browser's microphone capture. The browser's recording indicator disappears when the stream ends. Closing the tab also ends capture, but using the stop button is the cleaner way to confirm it.
Reviewed by the HandyTools Hub team · Last updated