A simple drum machine built with React using the Create React App toolchain. It plays samples downloaded from sampleswap.org and can be controlled via mouse or keyboard. I intitially completed this project on Codepen.io as part of the FreeCodeCamp Frontend Libraries Certificate, but I decided it merited further experimentation so I implemented it locally using Create React App.

Click here to see a simple deployment of this project using Netlify.

1. Clone or download the repository. Open a command prompt and CD into the project folder
2. You will need to install/update npm if you have not already - use sudo apt-get install npm (or npm install if you are using Windows)
3. Run npm start - the application should open in a browser window. If not, open http://localhost:3000/ manually.

I recently migrated the project to use the Web Audio API, instead of just playing sound from tags using the HTML DOM Audio object. This seems to have significantly decreased latency.

I intend to add a few more sound banks and a control element for cycling through them. I'd also like to add an interface that allows users to create their own soundbank by entering custom urls. I'm also considering adding recording and/or step sequencer functionality.

This project was built by modifying the Create React App template. If you want to make changes to it there are a few things to be aware of. From the Create React App documentation pages:

For the project to build, these files must exist with exact filenames:

public/index.html is the page template; src/index.js is the JavaScript entry point.

You can delete or rename the other files.

A few other commands you may find useful are npm test for testing and npm run build if you want to produce a deployable build

For more information about the Create React App toolchain refer to the documentation at https://create-react-app.dev/