Audio Visualizer
Visualize sound from your microphone in real-time
Controls
Click "Start Microphone" and allow microphone access to begin visualization.
Turn sound into light: this visualizer renders your microphone input as animated waveforms, frequency spectrums, and radial patterns in real time. Everything runs locally through the Web Audio API — nothing is recorded or uploaded. It is a fun way to test a microphone, explore how sounds look, or add a visual dimension to music practice.
How to Use
- Grant microphone access: Click start and allow the permission prompt.
- Make some noise: Speak, sing, clap, or play music near the mic.
- Switch modes: Toggle between Waveform, Frequency Bars, and Circular views.
- Stop anytime: Click stop to release the microphone.
Features
- Three modes: waveform, frequency bars, and circular spectrum
- Real-time rendering with no perceptible latency
- No recording — audio is analyzed and discarded frame by frame
- Works on desktop and mobile browsers
- No plugins; built on the Web Audio API
How Audio Visualization Works
Behind the animations are two ways of looking at sound. The waveform view shows the time domain: the raw amplitude of the signal, drawn as an oscilloscope-style line where loud sounds make tall deflections and silence is flat. The frequency views work in the frequency domain. An analyser node applies a Fast Fourier Transform (FFT), which decomposes the signal into its constituent frequencies — asking “how much energy is at each pitch right now?” Low bars on the left are bass, bars on the right are treble: a kick drum lights up the low end, a hi-hat the high end, and a voice energizes the middle. The circular mode maps that same spectrum radially. Because each video frame gets a fresh FFT snapshot, the display dances in sync with whatever the microphone hears.
Use Cases
- Microphone testing: Confirm a mic works before a call or recording.
- Music practice: Watch pitch and dynamics while singing or playing.
- Teaching: Demonstrate frequency, amplitude, and harmonics visually.
- Fun: See what your voice or a favorite song looks like.
Tips for Better Visuals
Distance matters: move closer for a strong signal, and back off if the waveform clips into flat-topped peaks. Background noise — fans, traffic, keyboards — shows up clearly in the frequency bars, so a quiet room gives a cleaner picture. To compare sounds, sustain vowels: a deep “oo” concentrates energy in the low bars while a sharp “ee” pushes it higher. If the display seems dead, check the browser’s mic indicator and selected input device — laptops often default to the built-in mic even with a headset plugged in.
Related Tools
Frequently Asked Questions
Does the visualizer record or save my audio?
No. All audio processing is done locally in your browser using the Web Audio API. No audio data is ever recorded, stored, or sent to any server. The visualization is generated in real-time and immediately discarded.
What visualization modes are available?
There are three modes: Waveform shows the raw audio signal as an oscilloscope-style line, Frequency Bars display a spectrum analyzer with bars for each frequency band, and Circular creates a radial visualization that emanates from the center of the canvas.
Why is nothing showing on the visualization?
Make sure you have granted microphone permission and that your microphone is working. Check that you are not muted and that audio is playing. If using a headset, ensure it is selected as the input device in your browser settings.
Which browsers support the Audio Visualizer?
The visualizer works in all modern browsers that support the Web Audio API and getUserMedia, including Chrome, Firefox, Edge, and Safari. Mobile browsers are also supported.