Sound Board
How this was built
Load your own sounds or pick from built-in ones, arrange them on a pad grid, and share the board with a link.
The problem
This one was for fun, and it was the first thing I ever built with AI. I watched my nephew play with a physical sound board and thought I could do it digitally, and better. So I tried, and it turned into the app that convinced me I could build the rest of these.
What it does
Upload your own audio clips or pick from the built-in sound library, then drop them onto a pad grid so you can tap through them fast, like a numpad. Keep up to three boards going at once, each with its own set of sounds. Turn on sharing for a board and you get a public link, no sign-in needed for whoever you send it to.
A quick example
Recording something with friends and you want a sound effect on hand right away, an air horn, a quote, whatever you’ve got. Instead of hunting through your camera roll, you hit the pad and it plays.
Features
- Upload your own clips, or start from the built-in library.
- Tap any pad to change which sound sits on it, or swap its icon.
- Keep separate boards for different occasions and switch between them.
- Light and dark mode, remembered per account. It is the only screen here that has one.
- Share a board by link so someone else can play it without an account.
- Try the whole thing on the demo board before signing up for anything.
What it's built with
| What I used | What it does here |
|---|---|
| Next.js | The whole app, App Router, rendered and deployed on Vercel. |
| Web Audio API | Plays pads instantly, without the lag of a plain audio element. |
| Supabase Storage | Holds the uploaded clips, served through signed URLs. |
| Supabase Postgres | Stores the boards and which sound sits on which pad. |
| Plain CSS | No framework. Design tokens are CSS custom properties. |