Let's add the audio sequencer to the game panel. We will go into the GamePanel object and add an instance of AudioSequencer to it:

function GamePanel(audioManager)
{
    var sequencer = new AudioSequencer();

Next let's write the public setOptions() method, which is called from the startGame() method of PianoHeroApp. It takes three parameters; the song name, playback rate, and whether to play the game or the song in practice mode:

    this.setOptions = function(songName, rate, playGame)
    {
        sequencer.events(musicData[songName])
                 .playbackRate(rate);
        practiceMode = !playGame;
        return this;
    };

The first thing we do is set the events() property of the audio sequencer to the data for the song to play. We get the song data from the musicData object, which is defined in musicData.js. Then, we set the audio sequencer's playbackRate() property. Lastly we set the practiceMode variable.

The musicData object contains event data that the sequencer can play for all of the songs that the user can select on the splash page. Each song is defined as an array of music event objects. Here's an example of what the data looks like for the rhyme Twinkle, Twinkle Little Star:

var musicData =
{
    littleStar: [
        { deltaTime: 0, event: 3, note: null },
        { deltaTime: 0, event: 1, note: "3C" },
        { deltaTime: 500, event: 2, note: "3C" },
        { deltaTime: 0, event: 1, note: "3C" },
        { deltaTime: 500, event: 2, note: "3C" },
        { deltaTime: 0, event: 1, note: "3G" },
        { deltaTime: 500, event: 2, note: "3G" },
        // ...
        { deltaTime: 0, event: 4, note: null }
    ]
};

It starts with a cue point event (event: 3), and then turns on note 3C (event: 1). After 500 milliseconds it turns off note 3C (event: 2). It continues on until the last event, which is end of track (event: 4).

Next let's write the startGame() method, which is called from the show() method:

function startGame()
{
    $resultsPanel.hide();
    $notesPanel.show();
    // Reset score
    noteCount = 0;
    notesCorrect = 0;
    score = 0;
    // Start interval for notes animation
    intervalId = setInterval(function() { updateNotes(); },
        1000 / framesPerSecond);
    // Start playback of the song
    sequencer.startPlayback(onAudioEvent, 0);
}

The first thing we do is hide the results panel and show the notes panel. Then we reset the score and statistics.

Next, we start an interval timer by calling the JavaScript setInterval() function and setting the intervalId variable to the handle that is returned. We will use that later to stop the interval when the game has finished, or the player stops the game. This interval is used to animate the elements in the notes panel that fall down from the top of the page. We set the interval to fire at a constant rate by dividing 1000 milliseconds by the number of frames per second. We will use a frame rate of 30 frames per second, which is enough to produce a relatively smooth animation and not bog down the game. At every interval of the timer we call the updateNotes() method, which we'll write in the next section.

The final thing we do in this method is call the startPlayback() method of the audio sequencer, passing it a reference to our audio event handler method, onAudioEvent(), and a start position of zero:

function onAudioEvent(eventCode, note)
{
    switch (eventCode)
    {
        case AudioSequencer.eventCodes.noteOn:
            addNote(note);
            break;
        case AudioSequencer.eventCodes.endOfTrack:
            sequencer.stopPlayback();
            break;
    }
}

This method accepts two parameters: the audio event code and the note to play. We use a switch statement along with our eventCodes enumeration to determine how to handle the event. If the event code is noteOn, we call the addNote() method to add a note element to the notes panel. If it's an endOfTrack event, we call stopPlayback() on the audio sequencer. We can ignore all of the other events for now.