Vanilla JavaScript SVG Drum Machine 🥁🤖

This project is deployed via GitHub pages at Vanilla JavaScript SVG Drum Machine.

This project was inspired by Day 1 of Wes Bos's Javascript 30 class.

I wanted to make something similar using SVG.

The SVG itself is modeled after the classic early 90s drum machine used by Dr. Dre, Pete Rock, and J. Dilla, just to name a few - the Akai MPC 3000.

As in Wes's tutorial the drum sounds can be triggered by pressing keys on the keyboard: 1-4 Q-R A-F Z-V

I also wanted the drum sounds to be triggered by clicking or touching the pads.

Touch and click functionality was added by mhull.

I reached out to him after seeing that his Guitar Zero project, which was also inspired by the same tutorial, used touch and click to trigger sounds as well.

Thanks for looking!