Audio Visualizer

See it in action at sidnewby.com

A real-time audio visualization experiment using the Web Audio API with dynamic visual representations and interactive controls.

Features

• Real-time Audio Analysis - Uses Web Audio API to analyze audio frequency and waveform data
• Multiple Visualization Modes - Waveform, frequency bars, and circular spectrum displays
• Dual Audio Sources - Support for both microphone input and audio file playback
• Color Schemes - Spectrum, teal, pink, and animated rainbow color modes
• Interactive Controls - Adjustable sensitivity and smoothing parameters
• Keyboard Shortcuts - Quick controls for visualization mode, color scheme, and playback
• Responsive Design - Works seamlessly across desktop and mobile devices

Tech Stack

• Next.js 16 — React framework with App Router
• React 19 — UI library
• Tailwind CSS v4 — Styling with CSS variables
• TypeScript — Type safety
• Web Audio API — Audio processing and analysis

Getting Started

# Install dependencies
npm install
# or
bun install

# Run development server
npm run dev
# or
bun dev

Open http://localhost:3000 to view the experiment.

Keyboard Shortcuts

Key	Action
M	Toggle microphone on/off
Space	Play/pause audio file
V	Cycle through visualization modes
C	Cycle through color schemes

Visualization Modes

Waveform

Oscilloscope-style time-domain visualization showing the audio waveform as a smooth, colored line.

Bars

Classic frequency spectrum with vertical bars representing different frequency ranges.

Circular

Radial frequency display with rays emanating from a central point, creating mesmerizing circular patterns.

Color Schemes

• Spectrum - Full color spectrum mapped to frequency range
• Teal - Single color theme with brightness varying by amplitude
• Pink - Vibrant pink theme with dynamic brightness
• Rainbow - Animated color rotation for dynamic effects

Performance

The visualizer uses optimized rendering techniques including:

• Pre-allocated buffers to avoid garbage collection
• RequestAnimationFrame for smooth 60fps animation
• Canvas-based rendering for maximum performance
• Efficient frequency data sampling

Browser Support

Requires a modern browser with Web Audio API support:

• Chrome/Edge 85+
• Firefox 78+
• Safari 14+

Microphone access requires HTTPS in production.

License

MIT