A simple drum machine application built with React, allowing you to create beats by clicking on drum pads or using keyboard shortcuts.
- Nine clickable drum pads, each with a unique audio clip.
- Keyboard shortcuts for triggering drum sounds.
- Display that shows the name of the currently playing sound.
Check out the live demo of the Drum Machine: Drum Machine Demo
These instructions will help you get a copy of the project up and running on your local machine for development and testing purposes.
- Node.js and npm should be installed on your machine.
-
Clone the repository to your local machine.
git clone https://github.com/your-username/drum-machine.git
-
Navigate to the project directory.
cd drum-machine
-
Install the project dependencies.
npm install
-
Start the development server.
npm start
-
Open your web browser and visit
http://localhost:3000
to view the drum machine app.
- Click on the drum pads to trigger sounds.
- You can also use keyboard shortcuts:
Q
,W
,E
,A
,S
,D
,Z
,X
, andC
keys correspond to the drum pads.
You can customize the drum sounds by replacing the audio files in the public/audio
directory with your own audio clips. Ensure the audio clips are in the MP3 format.
- React
- Tailwind CSS
- JavaScript
This project was created as part of the FreeCodeCamp Frontend Libraries and Frameworks curriculum. The initial user stories and requirements were provided by FreeCodeCamp.
This project is licensed under the MIT License - see the LICENSE file for details.
If you have any questions or suggestions, please feel free to contact us at [email protected].