This project initially began as my final project for Sounth Synthesis & Signal Processing, where I recreated a functioning Roland TR-808 in MaxMSP. As I began to learn more about web development, I decided that I wanted to challenge myself by creating a similar application that could run in a browser. My research led me to p5.js, a JavaScript library that focuses on creating audio and visual art with code. I fell in love with this creative form of coding and used p5 in order to build this page, along with some vanilla CSS for styling.
Note
This page is not mobile friendly, use desktop to view.
The drum machine is organized into a grid where each button in a row represents a quarter note, with 16 columns making a full measure. Each row is associated with playing a particular sound on each pass over a button. Clicking on a button toggles it both on and off.
Click the play button to play your created pattern and click again to stop it. The reset button will clear the current pattern, and the save button will save the current pattern to the pattern bank in your browsers local memory.
The pattern bank will let you save and load up to six different patterns. Click on any numbered pattern button to switch to it.
Use the BPM slider to choose the tempo that your pattern will be played back at. BPM ranges between 60 and 180.