The Javascript30 Day 1: adding instruments to the Drum Machine

I’ve long enjoyed his blog posts, so I was really excited for Wes Bos’s ‘Javascript 30’: 30 short tutorials on building cool stuff in vanilla JS. Since I’m not a real frontend developer, the lessons have included all kinds off stuff that was news to me, and beyond that it’s just fun to have fun coding.

I’m going to be posting extension ideas for the first few lessons, with an eye to adding each one to a portfolio. Day 1 is a drum machine that kicks off sound effects from keyboard input, and restarts the sound if you trigger it more than once.

screen shot of Wes's original drum machine page.

All I’ll do for this first project as extension is:
* change the background image to a local file
* add an instrument on a new keyboard button

New background!

To start with, I didn’t like a web request going out for a background image, and since the image was something grabbed from imgur, I didn’t really know its copyright status. No good for a portfolio, so I looked for a good online art archive that was releasing open-source images: turns out the Getty Museum has a great search tool for their archives

Okay, now I’ve downloaded the image I want to use, how do I place it as the background? I looked around the sample files and found this line in the CSS:

background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;

it took some digging to figure out the right syntax to link to a local image, turned out it was:

background: url("./images/dance-party-lo.jpg") bottom center;

note the double quotes and a ./ before the path. There are so few files in this thing it would be fine not to use an /images folder but that just felt too sloppy.

Okay, now that the image is replaced, time to add an instrument

adding a button

It’s always better to make changes incrementally. In this case, I’ll do two steps:
1. add a new keyboard button that plays the same instrument as another key
2. add a new sound effect for that button

Wes calls out in the tutorial you can use (keycode.info)[http://keycode.info/] to find every keyboard button’s code, and it seemed logical to add semicolon since all the other home-row buttons are there. I think the reason Wes didn’t do this originally is internationally issues: not every keyboard has ; to the right of L.

once I had the new keyboard code, there was a bunch of copy-paste as I added the button in the html. It worked first try!

new sound effect

Its kind of daunting trying to figure out what audio formats are supported, but all the other sound effects were .wav so I figured that would work. The Freesound Project makes its files available as .wavs, so I grabbed an appropriate ‘airhorn’ noise.

It wasn’t as confusing adding a new local sound, since the syntax was the same as the ones Wes already had. The final result looks nice:

image of new drum machine

Ideas for more stuff

  1. I tried making the sound play back at different pitches at each time. There’s even a call for ‘playback speed’ but it didn’t work the way I thought it was. Ended up dropping this
  2. some different arrangements would be cool
  3. change the look of a button the whole time the sound is playing

Leave a Reply

Your email address will not be published.