Skip to content

Varun191103556/Drum-Kit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Overview

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.

Features

  • Click on drum elements or press corresponding keys to produce drum sounds.
  • Stylish and responsive design.
  • Easy to customize and add new drum sounds.

Getting Started

Follow these steps to set up and run the drum kit on your local machine.

  1. Clone the Repository:

    git clone https://github.com/Varun191103556/drum-kit.git
    
  2. Navigate to the Project Directory:

    cd drum-kit
    
  3. Open index.html in Your Browser: Double-click the index.html file to open it in your default web browser.

Usage

  • 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.

Customization

You can customize this drum kit by adding your own drum sounds or modifying the existing ones.

  1. 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.
  2. Styling:

    • Customize the appearance of the drum elements by modifying the CSS in the styles.css file.

Dependencies

This project has no external dependencies. It uses only HTML, CSS, and JavaScript.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published