Skip to content
Sign upLog in
← Back to Community

JavaScript Drum Set

Profile icon

Turn on your sound!

This is a simple drum set I made using p5.js. I was originally just seeing how I could use colored rectangles to visualize key presses, but I eventually decided to add some sound samples I found on Freesound.

The upper drum sounds are assigned to two rows of keys (one above the other) to make consecutive hits easier. The kick drum is unique in that it has both a single-hit option (the sound plays once when the key is pressed) and a double-hit option (the sound plays once when the key is pressed, and again when the key is released). This makes playing quick kick hits easier.

The rectangles use a GRYBO color scheme, that of the Guitar Hero games. Though, it's not entirely accurate to the game, as Guitar Hero drums specifically use a RYBOG color scheme; I just used the guitar color scheme because I was familiar with it.

I could definitely add some more functionality (such as having separate samples for closed/open hi-hats, etc.), but I feel like this is fine for now. I wish there wasn't a lot of latency between a key press and the key being registered, but there's not really much I can do about it, as far as I can tell.

If there are any issues with the sound files or anything else, please let me know.

Profile icon