I’ve recently signed up for a batch of Wes Bos courses (free so far, but I’m strongly considering buying most of the others). I want to document what I’ve picked up from each of the lessons.

For Day 1, of Javascript 30 the exercise is to build a drum machine. The code for everything is available on github and comes in the form of a bunch of directories with a start file and a finished file. The start file is a skeleton with the html and css that you get to start with. The finished file is what you’ll end up with after finishing. The course consists of 30 daily videos and each of them looks to be 15-30 minutes long. Wes walks you through adding the necessary code to make the lesson functional.

In regards to the Day 1 exercise, drum kit, here’s what I learned and did. I learned that using

After implementing the drum kit, I took the same ideas and recorded some sounds in Garage Band of me and my kids saying things or making noises to make our own custom beat box/sound board page. It was pretty funny. I didn’t do any real UI for it. You just hit keys and it plays sounds. After that my daughter said it would be funny to have a hacker typer-like tool that would make sounds whenever you press a key so I did that. I made it so if the key isn’t bound to a specific sound then it will randomly pick a sound and play it. So every single key you press makes a sound.

One issue is that you can only play each <audio> component once at a time. I looked at what would be necessary to play the same sound several times simultaneously and it looks like you can either clone the audio element and keep track of what is used or not or use the more advanced SoundGL stuff. I didn’t do either at this point.

I also ended up upgrading from the code that the lesson talks about. This is because the e.keyCode is deprecated. I looked up what is available and found that you can also use (should use) just code. So that ended up working out fairly nicely because code gives you something like KeyA or KeyM instead of needing to figure out the ASCII codes and all that. I haven’t looked at how you do this for keys like space or command or control, but it should be easy to figure out.

Anyway, I’d love to hear what you all figured out or had trouble with or what you did or learned with this exercise.