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.
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
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
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:
Ideas for more stuff
- 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
- some different arrangements would be cool
- change the look of a button the whole time the sound is playing