An interactive web application built with React, allowing users to experiment with different drum sounds and play them.
- 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.
- 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.
-
Clone the repository:
git clone https://github.com/forhadakhan/play-drum.git
-
Install the dependencies:
cd drum-machine npm install
-
Start the development server:
npm start
Open your web browser and visit http://localhost:3000 to view the drum machine application.
- 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.
- Drum sounds and task: freeCodeCamp
This project is licensed under the MIT License. See the LICENSE file for more information.