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 is mainly done in JavaScript. Open the audiogame.js JavaScript file in a text editor.

4. Add a MusicNote object type to represent the music data and a Dot object type to represent the...