This project is a simple web-based drum kit that allows users to play drum sounds by clicking on the corresponding buttons or using keyboard keys. It's built using HTML for the structure, CSS for styling, and JavaScript for interactivity.
- Click on drum elements or press corresponding keys to produce drum sounds.
- Stylish and responsive design.
- Easy to customize and add new drum sounds.
Follow these steps to set up and run the drum kit on your local machine.
-
Clone the Repository:
git clone https://github.com/Varun191103556/drum-kit.git
-
Navigate to the Project Directory:
cd drum-kit
-
Open
index.html
in Your Browser: Double-click theindex.html
file to open it in your default web browser.
- Click on the drum elements on the webpage to play sounds.
- Alternatively, you can use your keyboard's keys:
- "W" for crash sound.
- "A" for kick sound.
- "S" for snare sound.
- "D" for tom sound.
- "J" for tom sound.
- "K" for tom sound.
- "L" for tom sound.
You can customize this drum kit by adding your own drum sounds or modifying the existing ones.
-
Modify Drum Sounds:
- Replace the audio files in the
sounds/
directory with your own audio files in.mp3
format. - Make sure to update the JavaScript code in
script.js
to use the correct file names and key bindings.
- Replace the audio files in the
-
Styling:
- Customize the appearance of the drum elements by modifying the CSS in the
styles.css
file.
- Customize the appearance of the drum elements by modifying the CSS in the
This project has no external dependencies. It uses only HTML, CSS, and JavaScript.