forhadakhan / play-drum

Play Drum: A React-based web application that enables users to play a variety of drum sounds.

Drum Play

An interactive web application built with React, allowing users to experiment with different drum sounds and play them.

Try it live

Features

• Power switch to turn the drum machine on and off.
• Bank switch to toggle between two sets of drum sounds.
• Drum pads with corresponding keyboard keys to play drum sounds.
• Volume control to adjust the volume of the drum sounds.
• Real-time display of the currently played sound and volume level.

Technologies Used

• React: JavaScript library for building user interfaces.
• Bootstrap: CSS framework for styling the user interface.
• HTML5 audio element: Used to play the drum sounds.
• JavaScript event handling: Used to detect key presses and button clicks.

Local Setup Guide

1. Clone the repository:

    git clone https://github.com/forhadakhan/play-drum.git

2. Install the dependencies:

    cd drum-machine
    npm install

3. Start the development server:

    npm start

Open your web browser and visit http://localhost:3000 to view the drum machine application.

Keyboard Controls

• Press the corresponding keyboard keys (Q, W, E, A, S, D, Z, X, C) to play the drum sounds.
• Ensure that the power switch is turned on for the drum pad to work. You can also control the power switch from the keyboard using 'P' key.
• Use bank switch to toggle between two sets of drum sounds. You can also switch banks from the keyboard using 'B' key.

Credits

• Drum sounds and task: freeCodeCamp

License

This project is licensed under the MIT License. See the LICENSE file for more information.