My take on the classic JavaScript Drum Kit

Code Feedback
1

My take on the classic JavaScript Drum Kit. Just vanilla JS, not with a frontend framework like is suggested for the Build a Drum Machine project for the Front End Libraries certificate.

I found a tutorial and watched the demo of how it is supposed to work, then without watching any of the coding part of the tutorial I tried coding it on my own. By “my own” means in many cases, for what I thought I wanted to accomplish, looking at the documentation for different things or in some cases googling “how do I do this”.

Without looking at others’ code for similar projects, I’m sure it’s not the most elegant solution but I think I got it working the way that it’s supposed to. I also added functionality for touch/click events that I didn’t see demonstrated in the demo. I’m pretty satisfied I got it to where it is in just a few hours and hope I can do things like this in less time as I practice more.

However, for some reason sounds don’t always play when expected, either a delay or not at all.

JavaScript Drum Kit

Edit: Went back and watched the rest of the tutorial. Turns out there was a simple fix for some of the audio issues. added sound.currentTime=0 to stop a current instance of the playing sound when a new event is triggered.

1 Like
2

Nice job for completing it in the end!

3

Hi,

It works, you’ve cleanly separated functionalities, you comment your code and use console.log statements so that your code becomes quite readable.

I wonder though why you do not use an audio-tag inside the html en then have it play() on mouseclick. That way you don’t have to add and remove the classes.
I do like that you can also play the sounds with your keyboard, cleverly done with little code. Maybe that is why you have set up this construction?
I believe you can achieve the same with an audio tag.

Your code is no DRY, you repeat yourself in playDrum and clickDrum and I think you can avoid that. And you repeat a lot in the switch statements.

Why is there sound.currentTime = 0? It works without it, I’m sure there’s a good reason for it but I don’t immediately see it.

So well done, and keep working at it. I think you can still refine.

I like to work with vanilla js more and more. I get the ‘don’t reinvent the wheel’ idea and the use of libraries but a wheel is not a simple little disc. It has a bearing and an axis and it’s pretty complicated. To choose the right wheel, you need to clearly understand what a wheel is. So, do invent the wheel, once, and you will know which library to use and also when not to use it. There’s so much stuff out there now that I sometimes wonder, am I running this app or is the app running me?

Greets,
Karin