Inspired by open-source 3kh0 utility projects.
: It includes service worker caching, allowing it to function as a Progressive Web App (PWA) for offline or near-instant access. Core Features
The standard tag introduces variable network lag when played. Web Audio API buffers raw data directly into system memory for instant playback upon clicking.
: It can be installed as a Progressive Web App (PWA) on mobile or desktop devices for a native app-like experience. 3kh0.github projects soundboard index.html
[ index.html ] │ ┌──────┼──────┐ ▼ ▼ ▼ [HTML5] [CSS3] [WebGL/Audio API] Structure Styles Logic Advantages of Single-File Deployment
The 3kh0 soundboard is designed for . It allows users to play a variety of meme sounds and audio clips by clicking on-screen buttons.
: Rather than hard-coding every button, the project uses a JSON-based system, making it incredibly easy for users to add their own custom sounds by simply editing a text file. Inspired by open-source 3kh0 utility projects
Inside that folder, create a blank text file and name it index.html .
A simple yet powerful online soundboard app that is a huge improvement from the last one.
document.addEventListener("DOMContentLoaded", () => const buttons = document.querySelectorAll(".sound-btn"); const stopButton = document.getElementById("stop-all"); let activeAudios = []; buttons.forEach(button => button.addEventListener("click", () => const soundSrc = button.getAttribute("data-sound"); // Create a new audio instance to allow overlapping sounds const audio = new Audio(soundSrc); audio.play(); // Track active playing items activeAudios.push(audio); // Clean up memory when audio finishes playing audio.onended = () => activeAudios = activeAudios.filter(item => item !== audio); ; ); ); // Global stop function stopButton.addEventListener("click", () => activeAudios.forEach(audio => audio.pause(); audio.currentTime = 0; ); activeAudios = []; ); ); Use code with caution. Styling the Grid Layout ( style.css ) Web Audio API buffers raw data directly into
The button is a crowd favourite: it plays every sound that has been loaded, producing a cacophony of memes. The “Stop Everything” button does exactly what it says, pausing all audio and resetting each clip to the beginning.
: By leveraging new Audio(src) , JavaScript instantiates audio streams dynamically. The command audio.currentTime = 0; ensures that if a user spams a button, the sound cuts off and retriggers instantly rather than waiting for the track to finish playing.