HTML5 Web Application Development By Example Beginner's guide

Chapter 7. Piano Hero

"One good thing about music, when it hits you, you feel no pain."

– Bob Marley

In this chapter we will turn the piano application from the previous chapter into a game where the player must play the notes of a song at the correct time as they fall down the screen. We will create a splash page that keeps track of image loading and allows the player to choose game options. We will create an audio sequencer to play the songs from music data. During the game we will collect piano keyboard input and validate it to determine the player's score.

We will learn the following in this chapter:

• How to use an HTML5 progress bar element to track the loading of resources
• How to use JavaScript timers to control playback of audio to play songs ...