This is a drum machine application built using React. It allows users to play different audio clips by clicking on buttons or using keyboard keys. The application also provides options to adjust the volume and record/playback custom sequences.
- Clone the repository or download the source code.
- Navigate to the project directory.
- Run the following command to install the required dependencies:
- After the installation is complete, start the application by running:
- The drum machine will be accessible at
http://localhost:3000in your web browser.
- Each button represents a different drum sound.
- Clicking on a button or pressing the corresponding key triggers the associated audio clip.
- The volume slider allows adjusting the volume of the audio clips.
- The “Record” button enables recording a sequence of played clips.
- The “Play” button plays back the recorded sequence.
- The “Clear” button clears the recorded sequence.
- The speed slider adjusts the playback speed of the recorded sequence.
The application consists of the following React components:
App: The main component that contains the drum machine interface and manages the state for volume, recording, and playback speed.
Pad: Represents an individual drum pad/button. It handles the playback of audio clips and manages the recording functionality.
The application utilizes the following dependencies:
- ReactDOM: A package that provides DOM-specific methods for React.
Contributions to the drum machine application are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.
This Drum Machine project is part of the FreeCodeCamp Frontend Certification course. It was completed as one of the required projects in the curriculum.
Learn more about FreeCodeCamp and their educational programs on their official website: https://www.freecodecamp.org/