HTML5 Game Development by Example(Second Edition)

Time for action – creating the playback visualization in the music game

In order to create the playback visualization in the music game, you'll need to carry out the following steps:

1. We need a song with both a melody part and a base part. Copy the minuet_in_g.ogg, minuet_in_g.aac, minuet_in_g_melody.ogg, and minuet_in_g_melody.aac files from the downloaded files or from the code bundle in the media folder.
2. Then, add the audio tag with the song as a source file. Open the index.html file and add the following code:

   <audio id="melody">
     <source src="media/minuet_in_g_melody.aac" />
     <source src="media/minuet_in_g_melody.ogg" />
   </audio>
   
   <audio id="base">
     <source src="media/minuet_in_g.aac" />
     <source src="media/minuet_in_g.ogg" />
   </audio>

3. The music visualization ...