Javascript 30 — Day 1: Drum Kit

When I first heard about Wes Bos recording a 30 day challenge that involves plain Javascript, I was incredibly excited. It took me over a month to actually get started on it, but here we finally are. I plan to write a little something every day and keep a 30 day streak going. This will, obviously, be about the things I’ve learned while doing this course / challenge.

Check out all the other days over at my table of contents!

So let’s get right to it.

What we are building today

For day 1 we are creating a drum kit using Javascript and a bunch of audio files. The process is, if you think about it, rather simple as we start with an event listener like so:

window.addEventListener('keydown', playAudio)

Up until now I have mostly used .onClick so using the event listener is sort of new, even though I already knew about it.

To figure out what key was pressed we simply look for the keyCode inside the event that was send to the function. You see every key has it’s own unique code. While this is different on some keyboards / inputs, they are mostly the same and you can use this little website Wes created called keycode.info to figure out the codes you need.

Side note: I had no idea there was so much information being passed around when you simply press a key!

Alright let’s quickly move on to playing the audio when you press a certain key. The first thing we need to do is select the audio files. This is where querySelector comes in to play. Up until now I have only used getElementById and was unaware of the existence of the query selector.

document.querySelector(`audio`)

There’s not much more to it then this. It will return the first element it matches. The thing is though: we have more than 1 audio file and need to select the specific audio file that matches our keycode.

Instead of using classnames for each key, we use something called data attributes. A quick read on MDN will tell you that the data attributes are there to allow us to store extra information without resorting to “hacking”.

In this case we are giving every element the key it represents like so:

<audio data-key="65" src="sounds/clap.wav"></audio>

Attributes can be used everywhere. We use them in CSS and we can also use them in Javascript:

document.querySelector(`audio[data-key="${e.keyCode}"]`)

I know this course is about Javascript, but I had no idea what the use behind data attributes were. I’ve seen them around, but it wasn’t until now that I can see the possibilities on how to use them.

Now I haven’t used audio files in the few projects I did, but most things are as easy and simple as you think they are and audio files aren’t any different. Simply doing audio.play() will play the audio file.

When you press a key, there’s a yellow border quickly added and then removed. I haven’t used Javascript to do this yet, so this is completely new to me. Javascript has a method called classList which you can call on any element and it will return a list of the classes. You can then .add .remove and a couple of other things.

So adding a class to a pressed key is as simple as:

key.classList.add('playing')

To remove it we can just do .remove but not until we have checked for transitionend with another eventListener.

TIL (Today I Learned)

• addEventListener can listen to a ton of events
• For every key pressed, there’s a ton of information being passed to the function
• Data attributes are a great way to add extra information
• Playing audio files is as simple as running .play()
• querySelector can be used to select a matched element
• classList returns a list of all classes which can be modified

Today I coded along with Wes. I’ll probably do that again for the next one. It helps me think about what he’s doing a bit more.

All of my code can be found at GitHub.

Check out all the other days over at my table of contents!

I know Wes’ teaching style and he is a great teacher. If you want to become more comfortable with Javascript, go check out this free course at javascript30.com.

Until next time!