A fast, phone-friendly meme soundboard you can customize, fork, and make completely your own.
|
Make it entirely your own: fork the repo, customize sound categories, pick custom colors, adjust master boost, and drop in your audio files — everything adapts instantly with zero coding needed. |
|
|
Written in zero-dependency Vanilla JS, HTML5, and CSS3. Loads instantly, runs smooth on any mobile device or desktop browser. |
Powered by GitHub Actions — just drop audio files into |
|
Installable directly to iOS & Android homescreens via Progressive Web App (PWA). Fully functional offline playback for cached sounds. |
Group clips into customizable categories with full color-picker customization, custom order management, and quick-filter tabs. |
|
Powered by the Web Audio API |
Search any clip on the fly by pressing /. Fast keyboard navigation and responsive sound cards with live playback indicators. |
| Audio Codecs & Extensions | Smart Naming & File Specs | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
✨ Automatic Label Formatting 🌐 Full UTF-8 & Emoji Support ⚡ Background Audio Pre-loading |
You don't need to know coding to deploy your own version:
flowchart LR
A["🍴 Fork Repo"] --> B["📂 Add MP3s to sounds/"]
B --> C["🤖 GitHub Action runs"]
C --> D["🌐 Instant Soundboard on Pages"]
- Fork the repository
Click the Fork button in the upper-right corner of this repo. - Add your sound clips
Upload your favourite audio files directly into thesounds/directory (via GitHub web upload or Git push). - Turn on GitHub Actions & Pages
- Head over to Settings → Actions → General → set Workflow permissions to
Read and write permissions. - Go to Settings → Pages → choose
Deploy from a branch→ Selectmainand root/.
- Head over to Settings → Actions → General → set Workflow permissions to
- Enjoy your Soundboard!
Your custom soundboard is live athttps://<YOUR-USERNAME>.github.io/<YOUR-REPO>/.
WebSoundboard combines instantaneous memory playback with smooth streaming fallback into a single unified master stage:
flowchart LR
SoundEvent["User Clicks Sound"] --> CheckBuffer{"Cached in Memory?"}
CheckBuffer -- "Yes" --> AudioBufferSource["AudioBufferSourceNode<br/><i>(Sub-millisecond)</i>"]
CheckBuffer -- "No" --> FallbackAudio["HTMLAudioElement<br/><i>(Streaming)</i>"]
FallbackAudio --> MediaElementSource["createMediaElementSource()"]
AudioBufferSource --> MasterGainNode["Master GainNode<br/><b>100% to 500% (+14 dB)</b>"]
MediaElementSource --> MasterGainNode
MasterGainNode --> AudioContextDestination["Speakers / Headphones"]
- Prebuffered Mode: On library load, high-priority clips are decoded into raw memory buffers via Web Audio API for sub-millisecond trigger latency.
- Dynamic Gain Master: The master slider adjusts amplitude smoothly using
setTargetAtTime, avoiding pops and distortion clicks.
No Node build steps or bundling needed. Run any simple static file server from the root directory:
# Using Python
python -m http.server 8080
# Or using Node.js
npx serve .
# Or using PHP
php -S localhost:8080Then visit: http://localhost:8080
- iOS (Safari): Open the soundboard link, tap the Share button, then tap Add to Home Screen.
- Android (Chrome): Tap the ⋮ menu button in Chrome and select Install app or Add to Home Screen.
Made with ❤️ by Pepe-PL
Feel free to star ⭐ the repo if you like it!