React Drum Machine

Summary

This was a personal project where I created a drum machine application to practice JavaScript. Different sounds could be triggered by clicking the pads or using keyboard keys.

Introduction

This project started as an attempt to record my drum kit and use the tracks as MIDI samples for my music projects. The samples would be triggered in Logic Pro by an Akai MPD218 MIDI drum pad controller.

MIDI controller inspiration

The design and functionality of the contoller inspired me to create a web app version to practice JavaScript. The idea was to trigger the pads via clicks or keyboard keys in a similar fashion to the MPD's pad inputs. Once activated, a pad would play the sound and light up.

I also thought it would be fun to display a randomized message on the interface after every four clicks. Many electronic instruments still use simplistic LCD screens, so I borrowed that aesthetic for the message display. I also included an option to load sounds recorded from my cat, Simon.

Version 1

You can view the first version of the project here and the GitHub repo here.

Hardcoded pads vs reusable components

The first version of this project was built with HTML, CSS, and vanilla JavaScript and while I was pleased the app worked, it wasn't particularly responsive and the code had a lot of room for improvement. Since I'd been taking a number of courses to learn React, I decided to rebuild the app and apply some of the new concepts I was learning. I hoped to create a modernized version of the app with reusable components able to load new sounds instantly rather than serving a new version of the page with different hardcoded sounds.

The biggest advantage of using React was the capability to pass pad attributes as props as opposed to hardcoding each pad with it's individual attributes. This allowed me to program one pad component and reuse it by loading different sounds and their corresponding titles from a JavaScript object with a single value passed as a prop. The app could then toggle between cat sounds and drum sounds by referencing the state set by the "Load Drum Sounds" and "Load Cat Sounds" buttons.

Conclusion

Though I arguably wrote more code in the rebuilt version of the app, Version 2 was a decidedly more sophisticated product using more efficient code. I also fixed many of the responsiveness issues present in the first version, but wasn't able to fix the audio lag when activating pads. I believe this could be improved with the addition of a back-end and hope to address it in a future update after I've learned more back-end development techniques.

You can view the final version of the project here or check out the GitHub repo here.