I’m working on improving my vanilla JavaScript skills. After finishing Scrimba’s Learn JavaScript for free course two days ago, I decided to start tackling Wes Bos’ JavaScript30. It’s been on my list for at least 3 years, and I started yesterday.

The first project, building a JavaScript drum kit, was really fun. My kids played with it for a while after I built it out, so I lost an hour or so of coding time after it was done, but I gained an hour of downtime for my brain, so it’s a net win.

The goal of the lesson is to create an application that plays a different sound for each drum pad when a corresponding keyboard key is pressed. The application should also include a visual indicator that shows which drum pad or key is being played. The HTML page comes with a “drum kit” rendered onscreen. There are squares that correspond to the middle row of letters on a keyboard running along the middle of the window. So, the letters A, S, D, F, G, H, J, K and L are represented. Each has the name of a drum sound below it. 

Our task is to use JavaScript to connect it to a set of WAV files so that they play when the given key is pressed. This includes adding event listeners to the buttons and the keys on the keyboard, and using the `audio` element to play the corresponding drum sound when a button or key is pressed.

The project is already set up with the following:

• The HTML structure for the drum pads and the display
• The CSS styles to render the HTML elements appropriately

I had to write JavaScript code to handle the following:

• Play the sound for each drum pad when the corresponding key is pressed
• Update the display to show which drum pad or key is being played
• Add/remove a “playing” class to the drum pads to create a visual effect when they are played
• Set up the WAV playback so that it restarts if the same key is pressed multiple times, instead of letting the first trigger of the WAV play all the way through, so a drum pad can be hit repeatedly

The main JavaScript features that were used in this project were:

• document.querySelector()
• document.querySelectorAll()
• .forEach()
• .addEventListener()
• .classList.add
• .classList.remove
• .propertyName
• .play()
• .currentTime
• event.keyCode (this is deprecated!)

HTML features & elements that were introduced that I haven’t used much before included:

• data- attributes
• <kbd> element
• <audio> element

This was a fun project to start the series off with, and it’s different from every other JavaScript project I’ve done because it connects event listeners to sounds instead of manipulating onscreen elements. I love that change of pace.

I changed the background, but didn’t do much else to make the project different from its typical implementation. After seeing how much the kids liked it, I’m going to take time to record them making some of the weird noises they like to make at their age and then build out a similar project that lets them trigger their own sound effects via keyboard. There are a bunch of things I want to try, to see if I can achieve similar results with a different approach. I’ll post about that after I’ve built it.

Here’s a link to my deployed version: https://vish213-drumkit.netlify.app/