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 – loading the notes

We have a keyboard but there's no sound yet. Let's head back over to our JavaScript and load all of the audio files. We will create a new method called loadAudio() and call it from the application's start() method.

There are two ways by which we could load all the files. We could load them one at a time by calling audioManager.getAudio() for each file, which would be very verbose and require a lot of typing. Or we can iterate over all of the piano-key elements and get the filename from their data-note attributes. By using this method we could add more piano keys to the HTML and wouldn't even have to touch the JavaScript:

function loadAudio() { var count = 0, loaded = 0, error = false; $(".keyboard .piano-key").each(function() ...

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