Turn music into art.

A browser-based generative art tool that transforms audio into unique visual compositions in real-time. Drop in a song, pick a visualization mode, and watch your music paint itself.

Audio is analyzed in real-time using the Web Audio API. Frequency data, amplitude, and beat detection feed into generative algorithms that create visuals unique to each song.

color = f(pitch, tempo, amplitude)

Each song produces a unique chromatic fingerprint based on its harmonic and rhythmic content.

• 50+ visualization modes — 2D, 3D, games, glitch art, and code generation
• Real-time audio analysis — frequency bands, amplitude, spectral centroid, beat detection
• Multiple audio sources — file upload, microphone, browser tab capture, YouTube
• Blast beat detection — automatically handles extreme tempos (>8 beats/sec)
• 4K PNG export — save creations at 3840×2160
• SVG export — vector output for supported modes (pen plotters, laser cutters)
• GIF recording — capture 5-second loops
• ASCII mode — text-based visualization overlay
• Lyrics mode — speech recognition interprets vocals as visual data
• Painter mode — canvas accumulates like oil paint
• Live tuner panel — real-time parameter adjustment
• Pan & zoom — navigate the canvas with mouse

# Clone the repo
git clone https://github.com/captnocap/audio-canvas.git
cd audio-canvas

# Install dependencies
npm install

# Start the dev server
npm run dev

Open http://localhost:3000 and drop in an audio file.

• Let a full song play to build up dense, detailed artwork
• Try different genres — each creates distinct visual signatures
• Export during interesting moments or at the end
• The same song will produce similar (but not identical) results each time
• Compare the same track across different modes
• Enable ASCII + Lyrics together for text-based vocal visualization
• Use the tuner panel (🎛️) to fine-tune visualization parameters

• Vite — build tool
• Canvas 2D — 2D rendering
• Three.js — 3D rendering
• Web Audio API — real-time audio analysis
• Oimo.js / Cannon-ES / Matter.js — physics engines
• Vanilla JS — no UI frameworks

Inspired by the algorithmic art of Monokai, particularly:

• Draad — flow field weaving
• Fire Card — stippled particle systems
• Origin — code-based generative art

MIT — do whatever you want with it. Make art. Print it. Sell it. Just have fun.

Built with Claude Code