Understanding the event cycle of HTML5 Audio is critical to making it work right. This can get especially confusing when you start mixing in the odd event cycles of jQuery Mobile. Add to that a confusing set of resource restrictions that differ per device, and you've got a real recipe for confusion. As a quick and easy way of testing mobile sites, you can usually just open up Google Chrome (since its WebKit) or IE9 (for the Windows Phone) and shrink it down to mobile size. Naturally, this does not substitute for real testing. Always check your creations on real devices. That being said, the shrunken browser approach will usually get you 97.5 percent of the way there. Well, HTML5 Audio throws that operating model right out the window.

On iOS, even if you've tagged the audio tag to preload and autoplay, it won't. No error is thrown; no indication is given that your coded requests were completely ignored. If you look at the code included for this chapter, you'll see in the...