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;
                if (++loaded == count) setStatus("Ready.");
                else setStatus("Loading " +
                        Math.floor(100 * loaded / count) + "%");
            },
            function(audio)
            {
                error = true;
                setStatus("Error loading: " + audio.src);
            }
        );
    });
}

The first thing we do is define some variables to keep track of the number of audio files that are being loaded and the number that have been loaded. We will use those to calculate the percent complete. We also need a variable to set if we get an error loading a file.

The next thing we do is select all of the piano-key elements using jQuery and call each() to iterate over them. For each one we do the following:

  1. Add 1 to the count variable to keep track of the total number of files.
  2. Get the note name, which is also the filename, from the data-note attribute. Notice that we must use the escape() function because some notes contain the sharp sign #, which is illegal in a URL.
  3. Call audioManager.getAudio() passing in the note name. This will cause the audio file to get loaded and cached. The next time we call getAudio() for this note, it will be loaded and ready to play.
  4. The second parameter to getAudio() is a function that gets called when each file has finished loading successfully. In this function we increment the loaded variable. Then we check if all of the files have been loaded and if so, show a ready message. Otherwise, we compute the percent complete of loaded files and show it in the footer by calling setStatus().
  5. The last parameter to getAudio() is a function that gets called if there is an error loading a file. When that happens, we set the error variable to true and display a message showing the file that couldn't be loaded.

    Note

    Note that if you are running this application through a web server such as IIS, you may need to add the .ogg file type to the list of MIME types for your site (.ogg, audio/ogg). Otherwise, you will get an error saying that the file is not found.

What just happened?

We used the AudioManager object to load all of the sounds for each keyboard key dynamically using their data-note attributes as the filename. Now we have all of our audio files loaded, cached, and ready to play.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.149.214.32