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( 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 ([] 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

The shopify exporter!

When a friend asked “is there a way I can automatically backup the important info from my Shopify store?” I figured there had to be an easy way, and sure enough there were a ton of available plugins/services to do just that. Since they’d asked me to do it myself I’d much rather write code than buy a thing and try and configure it. So I wrote a node app to grab it all and send it to S3. Behold the Shopify exporter!

Lessons learned:

  1. Heroku automatically lets you schedule node jobs! I thought I had to write all that code myself! Look out Twitter bots! 😛
  2. There really wasn’t a simple enough walkthrough of s3 uploads for me. They were all covering how to upload user-submitted data, which adds a whole front-end piece I wasn’t worried about.
  3. From the s3 dashboard there’s a button to upload files directly. A parenthetical warns you “Under 5 TB”. lol