Our Piano Hero game will start with the HTML5 piano application we built in the previous chapter. We will add an audio sequencer to it to play prerecorded songs. To score points, the player will need to follow along and play the notes of the song at the correct time. There will also be a practice mode that just plays the song so the player can hear it.
Our game will have two different main panels. The first will be the splash panel, which is the starting point of the game. When the application first starts, it will display a progress bar as the audio loads. When loading is complete, it will show the options for playing the game. When the player clicks on the play button they will transition to the game panel.
The game panel contains the piano keyboard and an area that shows the notes to play dropping down from above it. If the user plays the correct note at the correct time, they get points. At the end of the song, the player's score and some statistics are displayed. When...