Audio Visualizer

Capture sound via microphone in real-time and transform audio into stunning dynamic graphics. Supports spectrum bars, waveform, circular spectrum, and particle visualization modes.

Audio Visualizer

Capture sound via microphone in real-time and transform it into stunning dynamic graphics. Supports spectrum bars, waveform, circular spectrum, and particle visualization modes.

Please click the "Start" button below to begin

Theme

Audio Visualizer Guide

Audio Visualizer Usage Guide

Basic Usage

  1. Click the "Start" button
  2. Allow microphone access in the browser prompt
  3. Speak, sing, or play music into the microphone
  4. Watch the real-time dynamic graphics

Four Visualization Modes

Spectrum Bars

Displays audio frequency distribution as a bar chart — low frequencies on the left, high on the right, with bar height reflecting energy at each frequency band. Great for observing bass/treble distribution.

Waveform

Shows the sound's time-domain waveform in oscilloscope style, with symmetrical dual-layer glowing lines that visualize amplitude and frequency changes.

Circular

Expands the spectrum into a 360-degree ring. The center circle pulses with volume, outer bars bounce with frequency — the most visually stunning mode.

Particles

150 particles flow across the screen, each mapped to a frequency band. Louder sounds make particles move faster and grow larger, with nearby particles auto-connecting.

Controls

  • Sensitivity: Adjusts audio signal amplification (0.3–3.0); higher values produce more dramatic visuals
  • Smoothing: Adjusts spectral smoothing coefficient (0–0.95); higher values produce smoother transitions
  • Theme: Five color schemes — Neon, Fire, Ocean, Forest, Purple

Keyboard Shortcuts

  • Space: Start/Stop capture
  • 1 / 2 / 3 / 4: Switch between Bars / Wave / Circular / Particles modes

Technical Principles

Web Audio API

This tool is built on the browser's Web Audio API. It obtains the microphone audio stream via getUserMedia, uses AnalyserNode for real-time FFT (Fast Fourier Transform) analysis to convert time-domain signals to frequency-domain data, then renders the visualization on a Canvas 2D context.

Frequency Analysis

  • FFT Size: 2048, corresponding to 1024 frequency bins
  • Sample Rate: Typically 44100Hz or 48000Hz
  • Frequency Resolution: Sample rate / FFT size, ~21–23Hz per bin
  • Human hearing range: ~20Hz–20000Hz

Tips

  • Chrome or Edge browser recommended for best performance
  • Use headphones or external speakers to avoid microphone feedback
  • Lower ambient noise produces cleaner visuals
  • Fullscreen mode provides a more immersive experience