Independent experiment · Updated Sep 7, 2026
Gio's Soundboard
A browser soundboard restored from 16 original clips, with saved favorites, shareable links, and an owner dashboard for adding new sounds.
See the work
From the live product
Screens captured Sep 7, 2026
Open full screenshot in a new tabThe original collection is preserved
All 16 original MP3 files were recovered from the earlier repository and compared byte for byte. The recovery record includes the source commit and file hashes.
Read the audio recovery recordPlayback has explicit rules
One audio element handles the player. Shared links select a sound without autoplay, and the controls account for loading, pause, completion, and failure.
Inspect the audio player sourceRepeat visits keep useful state
Favorites, recent sounds, and settings are stored in the visitor’s browser. Regression checks cover malformed saved data, unavailable storage, daily picks, random selection, and keyboard handling.
Inspect the regression checksThe context
My earlier site had a soundboard people could play with. Restoring it gives visitors a practical interactive demo of the work, as well as a small reason to come back.
The problem
The original player and audio files were removed during a cleanup. The collection needed to be recovered intact, made easy to revisit, and expanded without editing application code for every new sound.
Constraints
Preserve the original MP3 bytes, IDs, paths, and shortcuts. Avoid autoplay and overlapping audio. Keep playback available without an account, restrict catalog management to the owner, and make the distinction between an unpublished pad and a public audio URL explicit.
The approach
Recover and fingerprint the archived audio, then separate the catalog, player, and preference logic. Put search and filters beside the pads. Add an owner workflow that validates a file, saves its pad as a draft, and lets me preview it before publication.
Architecture
Next.js reads published sound rows from Supabase and passes the catalog to a React interface controlling one HTML audio element. A protected Node.js route checks MP3 or PCM WAV file structure and upload limits; MP3s also undergo server-side WebAssembly decoding with mpg123 before storage. Each upload gets a new Supabase Storage path and a draft catalog row. Owner authorization and row policies restrict management, while column permissions preserve original IDs, file paths, and shortcuts. The original MP3s remain in the repository; favorites, recent sounds, volume, and keyboard settings remain in each visitor’s browser.
Key decisions
Use one audio element to keep pause, stop, and restart explicit. Shared URLs select a sound without autoplay, and stable IDs keep saved favorites usable. Start new pads as drafts and make publication an owner action. Check actual audio contents, cap uploads at 3 MB and 60 seconds, and reject MP3 decoding errors or all-silent output. Uploaded MP3 frames are preserved after ID3 removal. Archive pads without deleting audio, and disclose that audio URLs remain public while a pad is a draft or archived. A catalog outage shows an unavailable state, so archived pads cannot reappear through a fallback.
What it delivers
All 16 original MP3s were recovered byte for byte, including a clip omitted from the earlier pad list. The public player includes search, filters, favorites, recent sounds, random playback, shared selections, and keyboard controls. The owner workflow adds upload, preview, label/category/order editing, daily-pick eligibility, publication, and archiving. Regression checks cover original asset hashes, browser preferences, MP3 decoding, audio-file structure, upload limits, seeking, and keyboard handling.
Where it stands
Live public demo with an owner-managed catalog. Only published pads appear in normal catalog reads; uploaded audio URLs are public, including while a pad is unpublished. Preferences remain specific to each browser. The screenshots document the original restored collection on September 7, 2026.