Time for action – loading the notes

We have a keyboard but there's no sound yet. Let's head back over to our JavaScript and load all of the audio files. We will create a new method called loadAudio() and call it from the application's start() method.

There are two ways by which we could load all the files. We could load them one at a time by calling audioManager.getAudio() for each file, which would be very verbose and require a lot of typing. Or we can iterate over all of the piano-key elements and get the filename from their data-note attributes. By using this method we could add more piano keys to the HTML and wouldn't even have to touch the JavaScript:

function loadAudio()
{
    var count = 0,
        loaded = 0,
        error = false;
    
    $(".keyboard .piano-key").each(function()
    {
        count++;
        var noteName = escape($(this).data("note"));
        audioManager.getAudio(noteName,
            function()
            {
                if (error) return;
            ...