This project is inspired by Day 1 of Wes Bos's JavaScript 30 Course. The goal is to create an interactive drum kit that plays sounds when keys are pressed on the keyboard or clicked/tapped on the screen.
The Drum Kit allows users to:
- Play different drum sounds by pressing specific keys on the keyboard.
- Click or tap on-screen keys to produce sounds, ideal for touch screens.
The project consists of HTML, CSS, and JavaScript files that create a responsive drum interface.
| Key | Sound |
|---|---|
| A | Clap |
| S | Hihat |
| D | Kick |
| F | Openhat |
| G | Boom |
| H | Ride |
| J | Snare |
| K | Tom |
| L | Tink |
- Each drum key is linked to an
audioelement with a uniquedata-keyattribute. - JavaScript detects the key press or click event and matches it to the corresponding
data-key. - When a match is found:
- The audio element is played from the beginning.
- The key element is highlighted with a CSS class.
- The transition effect is removed once the sound and animation are complete.
- Clone or download the repository.
- Open index.html in a browser.
- Press any of the mapped keys (A, S, D, F, G, H, J, K, L) or click/tap the on-screen keys to play sounds.
- Tapping/Clicking Functionality: Tapping or clicking on the keys plays the corresponding sounds, making it compatible with touch screens. This feature has been implemented to enhance interactivity.
- Modifying Styles: Customize key appearance and animations in style.css.