Audio Visualiser
Play a track and let the frequencies drive what you see.
IntermediateWeb appMedia10–20hAI-buildable 5/5no setup
Wire the Web Audio API's analyser node into a canvas render loop, with several visualisation modes over the same data. The interesting problem is smoothing — raw FFT data is jittery, and making it feel like it's dancing rather than twitching takes real work.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 6
- Load an audio file by drop or file picker
- Playback controls with a seekable progress bar
- Frequency data drives a canvas visualisation
- At least two visualisation modes over the same data
- Values are smoothed so motion reads as fluid, not jittery
- The audio context is resumed correctly after user interaction
The interesting part
- Browsers require a user gesture before audio can start
- Smoothing FFT data without making it lag the music
- Keeping the render loop in sync with playback position
Once it works
- Add microphone input as a source
- Add beat detection that triggers visual accents
- Let the user tune the FFT size and smoothing live
Suggested stack
reacttypescripttailwindcanvas-api