Time for action – creating the splash panel

Let's start by copying the piano application that we created in the previous chapter, and renaming the files to pinaoHero.html, pianoHero.js, and pianoHero.css. We will also rename the main application object to PianoHeroApp. You can find the code for this section in Chapter 7/example7.1.

Now let's create the splash panel. First we'll define the HTML in pianoHero.html. We will add a new <div> element above the keyboard element to hold the splash panel:

<div id="splash">
    <h1>Piano Hero</h1>
    <section class="loading">
        Loading audio...<br/>
        <progress max="100" value="0"></progress>
    </section>

First we add a section with a class of "loading" that displays the status of loading the audio when the application first starts up. Notice that we are using the new HTML5 <progress> element. This element...