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

The next thing we need to do is add event handlers to play an <audio> element when a piano key is clicked or touched. We will hook up and event handlers to all of our piano keys and play the associated note when they are fired.

Note

At the time of this writing, the state of audio on mobile devices isn't very good. Although a touch device would be perfect for a piano app, the sounds don't always play correctly because of the way mobile browsers cache audio (or not).

Let's create a method called initKeyboard() that will be called from the application's start() method:

function initKeyboard() { var $keys = $(".keyboard .piano-key"); if ($.isTouchSupported) { $keys.touchstart(function(e) { e.stopPropagation(); e.preventDefault(); ...

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