Project 18: Music Visualizer

📋 Project Brief

Build a real-time audio visualizer that generates dynamic visual art from sound using the Web Audio API and Canvas. Users can visualize music files or live microphone input with frequency bars, waveforms, and color-responsive animations.

✅ Feature Requirements

Feature 1: Web Audio API Integration

Acceptance Criteria:

• Create an AudioContext and connect audio sources to an AnalyserNode
• Support two input sources: uploaded audio files and live microphone
• Extract frequency data using getByteFrequencyData()
• Extract time-domain data using getByteTimeDomainData()
• Handle the "AudioContext was not started" user gesture requirement

Feature 2: Canvas Animation

Acceptance Criteria:

• Render at 60FPS using requestAnimationFrame
• Frequency bars: vertical bars whose height corresponds to frequency amplitude
• Circular mode: bars arranged in a circle, radiating outward
• Smooth animation: bars transition between values rather than jumping
• The canvas must resize responsively with the window

Feature 3: Microphone Input

Acceptance Criteria:

• A "Use Microphone" button requests permission via getUserMedia
• Live audio from the microphone feeds into the visualizer in real-time
• A visual indicator shows when the microphone is active
• A "Stop" button disconnects the microphone and releases the stream
• Handle permission denial gracefully

Feature 4: Color-to-BPM Mapping

Acceptance Criteria:

• The visualization color palette shifts based on the "energy" of the audio
• Low energy (quiet/slow): cool colors (blues, purples)
• High energy (loud/fast): warm colors (reds, oranges, yellows)
• Energy is calculated from the average amplitude of frequency data
• Color transitions are smooth (interpolated over ~500ms)

Feature 5: Waveform Toggle

Acceptance Criteria:

• Toggle between "Frequency Bars" and "Time-Domain Waveform" modes
• Waveform mode draws a continuous line (like an oscilloscope)
• Both modes use the same color mapping system
• A third mode "Combined" overlays waveform on top of frequency bars

📊 Audio Processing Pipeline

Stage	API Used	Purpose
Source	createMediaElementSource or getUserMedia	Audio input
Analysis	createAnalyser	Extract frequency/time data
Data	getByteFrequencyData	128-1024 frequency bins as 0-255 values
Render	Canvas 2D fillRect / lineTo	Visual output

🧪 Testing Checklist

• Unit test energy calculation from frequency data array
• Unit test color interpolation between cool and warm palettes
• Integration test: uploading an audio file starts the visualization
• Test microphone permission handling (grant, deny, revoke)
• Performance: maintain 60FPS with 512 frequency bins

🚀 Stretch Goals

• Add preset visualizer styles (Retro, Neon, Minimal)
• Implement beat detection for pulse effects
• Record the visualization as a video (MediaRecorder API)
• Add a playlist system for multiple tracks