HTML5 Web Application Development By Example Beginner's guide

Creating animated notes

Now we are going to implement the code for the notes panel. This is where the animation of notes dropping from the top of the page happens. It works something like this:

• The audio sequencer sends an event that a note should be played (see onAudioEvent() in the previous section).
• The note is not actually played at that time. Instead a rectangular element that represents the note is added to the top of the notes panel.
• Every time our animation interval timer fires, the y-position of the note element is incremented so that it moves down.
• When the element hits the bottom edge of the notes panel (and the top edge of the keyboard), it plays the audio clip associated with the note.
• When the element completely leaves the notes panel, ...