Sound Board
A pad of buttons that each fire a sound, stopping whatever's playing.
StarterWeb appMedia1–3hAI-buildable 5/5no setup
Audio element control where triggering a new sound stops the current one. Managing multiple audio elements and their playback state is a small but genuinely fiddly problem.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 4
- Each button plays its own sound
- Playing a new sound stops whatever is currently playing
- Buttons are generated from a sound list, not hardcoded
- Rapid presses don't stack overlapping audio
The interesting part
- Resetting currentTime so a re-triggered sound restarts properly
Once it works
- Add keyboard shortcuts per pad
- Add a record-a-sequence mode
Suggested stack
reacttypescripttailwinddate-fnstanstack-query