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.

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>

The music visualization is mainly done in JavaScript. Open the audiogame.js JavaScript file in a text editor.

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