Web Audio API · Canvas · JavaScript Live

Acoustic
Analyzer

Real-time microphone analysis directly in the browser — frequency spectrum, waveform, and perceptual activation metrics. No install, no plugins.

🌐 Browser-based 🎙️ Mic required ⚡ No install 🔒 HTTPS only

Live Audio Analysis

Inactive
Volume Level
0
Peak Frequency
— Hz
Frequency Range
0-22k

⚠️ Important Disclaimer: This analyzer is designed for educational and demonstration purposes. Device microphones vary significantly in quality, frequency response, and calibration. Results are approximate visualizations and should not be used for precise acoustic measurements or professional audio analysis.

📖 How to Use

  • Grant Microphone Permission — Click "Start Analyzer" and allow your browser to access your microphone when prompted
  • View Real-Time Analysis — The frequency spectrum (top) shows which frequencies are present in the sound, while the waveform (bottom) displays the audio signal over time
  • Monitor Metrics — Watch the volume level, dominant frequency, and frequency range update in real-time
  • Stop Analysis — Click "Stop Analyzer" to end the session and release microphone access

📊 Understanding the Visualizations

  • Frequency Spectrum (Top Graph) — Shows intensity of different frequencies. Taller bars = stronger presence. Low frequencies left, high frequencies right
  • Waveform (Bottom Graph) — Raw audio signal amplitude over time. Larger waves = louder sounds. Reveals rhythm, dynamics, and temporal patterns
  • Volume Level — Relative measure of overall sound intensity from 0 (silence) to 100 (very loud)
  • Peak Frequency — Most dominant frequency currently present, measured in Hz
  • Frequency Range — Span of detectable frequencies, typically 0–22 kHz
03 — Technical Implementation

This analyzer uses the Web Audio API to access microphone input and perform real-time Fourier transforms (FFT) to decompose the audio signal into its frequency components. The visualization is rendered using HTML5 Canvas with smooth animations and gradient effects.

🧪 Try These Experiments

  • Whistle or Hum — Watch a clear spike appear in the frequency spectrum at the pitch you're producing
  • Clap Your Hands — Observe the sharp transient in the waveform and broadband energy in the spectrum
  • Play Music — See how complex sounds create rich patterns across multiple frequencies simultaneously
  • Different Environments — Compare the ambient noise signature of quiet rooms versus busy spaces
04 — Technology Stack
Web Audio API
Microphone input, FFT analysis
Canvas 2D
Real-time spectrum & waveform rendering
Vanilla JS
No framework dependency
HTTPS
Required for mic access

Browser Compatibility

Works on all modern browsers supporting the Web Audio API — Chrome, Firefox, Safari, and Edge on desktop and mobile. Use a recent browser version and ensure microphone permissions are granted.