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 ...

Get HTML5 Game Development by Example : Beginner's Guide - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.