Bring Your Web Apps Alive on the iPhone with Sound!

Not long ago, we had few options as developers of web applications when it came to playing sounds on the iPhone. We could link to a sound file, but it would navigate to a QuickTime screen to play it. Since Flash is not an option and JavaScript has no built-in sound capability, we were without hope. Our JavaScript applications were doomed to be forever silent.

But now, with the HTML5 audio capabilities present in Safari on the iPhone with the latest iOS 4.0 update there is new hope! Yes, your iPhone can now play sounds inline with the web page. I'm going to talk now about how to best take advantage of this new capability while still supporting other browsers with not as much HTML5 support.

I've been using a great JavaScript audio library called SoundManager 2 for years to make the frogs on my website ribbit on command. Up until recently, it accomplished the miraculous feat of adding audio capabilities to JavaScript using small Flash files. While this was great for regular web browsers of the past (nearly every computer that can browse the web has at least Flash 8 support), with the advent of the mobile browser my website became quiet for many of my visitors. That all changed in the last few months when SoundManager updated to include support for the HTML5 Audio capabilities and the iPhone OS updated to 4.0.

There are a couple of good reasons for using SoundManager 2 to bring sound to your website. First, it has an extremely easy to use API. Second, it supports so many different browser configurations (now including mobile Safari!) in a totally transparent manner. You can be playing sounds from your web application in just a few lines of code. Let's see how simple it can be.

Step 1: Download the latest version here.

Step 2: Unzip and copy the following files to a directory in your web application (I use /soundmanager2 off the root for this).

From the script directory: soundmanager2-jsmin.js, soundmanager2-nodebug-jsmin.js, and soundmanager2.js

From the swf directory: soundmanager2.swf and soundmanager2_flash9.swf

Step 3: Include the js file in your web page.

<script src="/soundmanager2/soundmanager2.js" type="text/javascript"></script>

Step 4: Set up the SoundManager configuration. The most important item in the configuration is the location of the SWF files, but you also have to turn on HTML5 Audio support if you want it. Here's the configuration I use:

<script type="text/javascript">

soundManager.debugMode = false;
soundManager.url = '/soundmanager2/';
soundManager.useHTML5Audio = true;

</script>

Step 5: Initialize the sound objects. You can't do this until SoundManager has completely initialized itself, so it provides an onload property that you just set to an appropriate function. Here's an example.

<script type="text/javascript">

var frogSound;

soundManager.onload = function() {

frogSound = soundManager.createSound({
id: 'frogSound',
url: '/sounds/frog_1.mp3'
});

}

</script>

Step 6: Play the sound! When you want to play the sound, you just call the play() function on the variable you initialized (frogSound in the example above). You might want to put a try/catch around the play call just in case something goes wrong, but in most cases it will work and you'll hear your sound!

frogSound.play();

Give it a try for yourself and see what kinds of HTML5/JavaScript games you can make that play with sound on your iPhone. Be sure to read the documentation for SoundManager2, because the new HTML5 features and limitations are changing as more browsers add and change support for HTML5.