For starters, I had always assumed (and probably not thought about it much) that one needs a complicated, bloated library to play audio files on a web page. It turns out I was wrong, you can just use an
audio HTML element and give it a
Like Wes explains, one should be aware that not all browsers support the
audio element, although all modern browsers do.
What I Learned
When you listen for the
keyCode property that indicates which key was pressed by the user. This was central to Wes’s app, since all of the drum sounds are triggered by keyboard input.
I like the idea of using keyboard shortcuts on websites, so this was a good reminder to me that they are not time consuming to implement, and also they are FUN.
The other main takeaway for me was this:
What I Did Differently
Wes’s basic strategy was super simple and solid, but of course I had to tinker around with things a little. This is a tutorial challenge after all, is it not?
To help keep things simple, I am using the word key in the following discussion to refer to the inputs available to the user (i.e.
E, etc…), which are the triggers that play the different sounds in the app. I also use the word key to encompass the markup and functionality associated with a single user input.
Here are the main things that I did differently/expanded on from the video:
1. Template for key/button elements
Instead of repeating many HTML elements for the keys and using HTML data attributes, I decided to make a repeatable HTML template and then insert JS object data into copies of the template.
2. Array to serve as a list of key objects
Each key starts out as an object with just a few properties, and each object will eventually fill a copy of the above template in order to form the HTML for the keys.
I like this approach because if I ever want to expand on the HTML for the key items or give the keys extra properties, then I am set up to quickly do so.
Once unique properties for each key are defined, I add the common functionality to each key using the factory approach.
3. Key factory
The key factory approach is an attempt to generalize the functionality inherent within a single key. For the sake of brevity, I have only shown the parts here that are significantly different from Wes’s example in the tutorial.
Finally, I pass each key through the Key factory by invoking
Key.call() on each item of the
4. Onclick and Touchstart
As I was building out my demo based on the video, I noticed that it was virtually impossible to use on my phone’s browser. The issue wasn’t with the audio support, but rather there was no obvious way to get my phone’s keypad to appear while viewing the web page. For this reason, I added listeners for
touchstart to enable users to trigger the sounds without using a keyboard.
Other than adding my own sound clips, those are just about all of the things I did different from Wes’s excellent video.
Since I enjoyed this exercise so much, my hope is that the extra steps I took will make it easier for me to do things in the future like add extra sound clips, experiment with looping and other sound alteration techniques, and even create additional mini-apps with different kinds of noises and musical elements.
Go ahead, rock out a little bit!