The next thing we need to do is add event handlers to play an <audio> element when a piano key is clicked or touched. We will hook up and event handlers to all of our piano keys and play the associated note when they are fired.

Let's create a method called initKeyboard() that will be called from the application's start() method:

function initKeyboard()
{
    var $keys = $(".keyboard .piano-key");
    if ($.isTouchSupported)
    {
        $keys.touchstart(function(e) {
            e.stopPropagation();
            e.preventDefault();
            keyDown($(this));
        })
        .touchend(function() { keyUp($(this)); })
    }
    else
    {
        $keys.mousedown(function() {
            keyDown($(this));
            return false;
        })
        .mouseup(function() { keyUp($(this)); })
        .mouseleave(function() { keyUp($(this)); });
    }
}

First, we use jQuery to select all of the piano-key elements on the keyboard. Then,we use the touch event's jQuery extension to check if the browser supports touch events. If so, we hook up touch event handlers to the piano keys. Otherwise, we hook up the mouse event handlers.

When a key is touched or the mouse clicked down, it calls the keyDown() method passing in the key element wrapped in a jQuery object.

Let's write the keyDown() method first:

function keyDown($key)
{
    if (!$key.hasClass("down"))
    {
        $key.addClass("down");
        var noteName = $key.data("note");
        var audio = audioManager.getAudio(escape(noteName));
        audio.currentTime = 0;
        audio.play();
    }
}

In the keyDown() method we first check if the key is already pressed down by checking if it has a class of down. If not, we add a class of down to the key element. We will use this to style the key to make it look like it's pressed. Then, we get the key's note name from the data-note custom attribute. We pass that to the audioManager.getAudio() method to get the <audio> element. To start playing the audio clip, we first set the currentTime property to 0 to cue up the sound at the start. Then we call the Audio API's play() method to start playing it.

function keyUp($key)
{
    $key.removeClass("down");
}

The keyUp() method simply removes the down class from the element, so the key won't be styled in the down position any more.

The last thing we need to do is add the styling for the key down state. We will use a gradient to make it look like the end of the key is pressed down. We also make the shadow a little smaller since the key is not as high when pressed:

.keyboard .piano-key.white.down
{
    background-color: #F1F1F0;
    /* Browser-specific gradients not shown */
    background: linear-gradient(top, Ivory, #D5D5D0);
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.6);
}
.keyboard .piano-key.black.down
{
    background-color: #111;
    /* Browser-specific gradients not shown */
    background: linear-gradient(top, Black, #222);
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.6);
}

What just happened?

We hooked up event handlers to the piano keys to play the associated notes when they are clicked with the mouse or touched on a touch device. We added some styling to give a visual indication that the key is pressed down. Now we have a functioning piano using HTML5 Audio. Go ahead and open it in your browser and bang out some tunes.