O'Reilly logo

HTML5 Game Development by Example : Beginner's Guide - Second Edition by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required