Skip to content

MS134340/Drum-kit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🥁 Drum Kit Web App

An interactive Virtual Drum Kit built using HTML, CSS, and JavaScript.
Play realistic drum sounds with your keyboard keys or by clicking on the buttons.
Simple, fun, and a great beginner project to learn about DOM manipulation and web audio.


🔥 Features

  • 🎶 Play drum sounds via mouse click or key press
  • ⌨️ Keyboard controls: W, A, S, D, J, K, L
  • ✨ Button animations when activated
  • 📱 Responsive layout for mobile and desktop
  • 🔊 Adjustable volume and mute/unmute (optional)

🎯 Key Bindings

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

🛠️ How to Run Locally

  1. Clone the repository:

    git clone https://github.com/MS134340/Drum-kit.git
  2. Navigate to the project folder:

    cd Drum-kit
    Open the index.html file in your browser.

Recommended: Use the Live Server extension in VS Code for automatic reload on save.


🧑‍💻 Built With

  • HTML5
  • CSS3
  • JavaScript (ES6)

About

A fun and interactive virtual drum kit built with HTML, CSS, and JavaScript. Play drum sounds using your keyboard or mouse clicks with responsive design and animations.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors