HTML5 Web Application Development By Example Beginner's guide

Time for action – creating a virtual piano

We'll start as usual by copying our application template that we created in Chapter 1, The Task at Hand, and renaming the files to piano.html, piano.css, and piano.js. We also need touchEvents.js that we created in the previous chapter.

Inside piano.js, we'll change the application object to PianoApp:

function PianoApp()
{
    var version = "6.1",
        audioManager = new AudioManager("audio");

We create an instance of AudioManager and pass in the path to our audio files, which will be the audio folder. Now let's open our HTML file and add all of the piano keys:

<div id="keyboard"> <div id="backboard"></div> <div class="keys"> <div data-note="2C" class="piano-key white"></div> <div data-note="2C#" class="piano-key ...