A browser-based, interactive drum kit built with vanilla JavaScript. Play the drums using your computer keyboard with real-time visual feedback. Perfect for killing time or practicing your air-drumming skills.
- Keyboard Playability: Press keys (W, A, S ,D,J, K, L) to trigger different drum sounds.
- Instant Visual Feedback: Buttons animate on press (scale up and glow) to simulate a physical hit.
- Rapid Hit Support: The audio resets on each key press, allowing for fast drum rolls.
- Responsive Design: Works on different screen sizes (Desktop and Tablet).
- Clean UI: A modern, dark-themed interface with clearly labeled keys.
- HTML5: For structuring the drum pads and audio elements.
- CSS3: For styling, grid layout, and animations.
- JavaScript (ES6): For handling keyboard events, audio control, and DOM manipulation.
Check out the live version hosted on GitHub Pages:
(https://gabskay.github.io/Drumkit-project/)
- Visit the [Live Demo][https://gabskay.github.io/Drumkit-project/] link.
- Make sure your cursor is focused on the browser window (click anywhere on the page).
- Press the keys displayed on the screen (e.g., W, A, S, J) to hear the corresponding drum sounds.
- Watch the pads light up as you play!
index.html: Contains the structure of the drum pads and audio sources.style.css: Handles all the styling, layout, and the.playinganimation state.script.js: Contains the JavaScript logic for playing sounds and handling transitions./sounds/: Folder containing the drum hit sound files.
- Connecting keyboard events (
keydown) to visual elements usingdata-attributes. - The nuances of the HTML5 Audio API (specifically resetting the
currentTimeto allow for overlapping sounds). - Using
transitionendevents to remove CSS classes after animations finish, keeping the code clean. - Deploying a static site using GitHub Pages.
Made with 🎧 by Gabriel
- LinkedIn: [(https://www.linkedin.com/in/gabriel-kumadey-9918a833a/)]
- GitHub: [(https://github.com/gabskay)]