Drum 🥁 Kit Website

Overview

The Drum Kit project is an interactive website that allows users to play drum sounds by clicking on buttons or pressing specific keys on the keyboard. This project is built using HTML, CSS, and JavaScript.

Features

• Interactive Buttons: Click on drum buttons to produce specific drum sounds.
• Keyboard Support: Use keys W, A, S, D, J, K, L to play corresponding drum sounds.
• Visual Feedback: Buttons are animated when pressed.

Technologies Used

• HTML: Structuring the content of the website.
• CSS: Styling the buttons and the overall layout.
• JavaScript: Adding interactivity and functionality.

Files Included

1. index.html: Defines the structure of the Drum Kit webpage.
2. styles.css: Contains styles for the webpage layout and design.
3. index.js: Handles the logic for sound playback and animations.
4. sounds/: Folder containing the drum sound files:
   • tom-1.mp3
   • tom-2.mp3
   • tom-3.mp3
   • tom-4.mp3
   • snare.mp3
   • crash.mp3
   • kick-bass.mp3

How to Run

1. Clone the repository or download the project files.
2. Ensure the following file structure:

   /project-folder
   |-- index.html
   |-- styles.css
   |-- index.js
   |-- /sounds
       |-- tom-1.mp3
       |-- tom-2.mp3
       |-- tom-3.mp3
       |-- tom-4.mp3
       |-- snare.mp3
       |-- crash.mp3
       |-- kick-bass.mp3
   

3. Open index.html in a web browser.
4. Click on the drum buttons or press the corresponding keys to play sounds.

Key Mappings

Key	Sound
W	Tom 1
A	Tom 2
S	Tom 3
D	Tom 4
J	Snare
K	Crash
L	Kick Bass

Screenshots

Example of the Drum Kit interface in action.

Future Enhancements

• Add more drum sounds and buttons.
• Include volume controls.
• Create a recording and playback feature.
• Add mobile-friendly support for touch interactions.

Acknowledgements

This project is inspired by web development tutorials and is a fun way to practice DOM manipulation, event handling, and JavaScript animations.