O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

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

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