I’ve been experimenting a bit with HTML5 mobile applications.  One of the funny little corners I’ve found is how to reliably use audio effects across platforms.  The HTML5 spec includes an <audio> tag.  Unfortunately I found it to be a little quirky, especially on some Android 2.x devices that I tested.

If you aren’t concerned with every mobile device and you know that it is well supported on your target platforms, the <audio> tag might be the easiest way to create sounds.  Here is an example:

<audio id="sound_click" src="audio/click.wav" preload="auto"></audio>
<script>
    //do this when you want to play the click.wav sound:
    document.getElementById('sound_click').play();
</script>

For me, this worked out perfectly for the iOS devices I tested with and also in the Chrome browser I use during development.  On my Android 2.3 device, it was very laggy and I couldn’t get it to work the way I wanted.

There are some open source libraries that can help you in your cross-platform quest.  I looked at jPlayer for a bit.  It works on the devices I tested on.  Under the hood jPlayer uses the HTML5 audio tag with a Flash player fallback.   It is a great solution if you are doing a pure web app and don’t have any access to the native layer.

I am using PhoneGap Build to package my HTML5 code as a native app on Android.  That gives me another option.  I can use PhoneGap’s audio API for the cross platform audio goodness that I want.  It did take a little research to get all the pieces in just right.  The trick I was missing in my first go round was specifying the path to the audio resource properly.  It turns out that you need to prepend “/android_asset/www/” to the relative path for your audio file.  In the end my audio code looked like this:

var my_media = null;
function playClick() {
    if (onAndroid && onPhoneGap) {
        if (my_media == null) {
            my_media = new Media("/android_asset/www/audio/click.wav",
                                                function () { console.log("playAudio():Audio Success"); },
                                                function (err) { console.log("playAudio():Audio Error: " + err); console.log(err); console.log(err.toString()); });
        }
    my_media.play();
    } else {
        document.getElementById('sound_click').play();
    }
}

This lets me use the regular HTML5 audio tag when my application isn’t running as a native app and the PhoneGap media API when I’m on android.