Question

In my small HTML5 web-app, I want to play sounds in response to user actions. When the user clicks a button, in the onclick handler I play a sound like this:

    url = "assets/sounds/buzz" + (this.canPlayMP3 ? ".mp3" : ".ogg");
    sound = new Audio(url);
    sound.load();
    sound.play();

This works great on Firefox. Unfortunately, on an iPad (iPad 2 running iOS 5.1.1), I get a 2-second delay before the sound is played. This happens every time I play the sound sample, not just the first time.

The MP3 file is 9KB long. The iPad is connected to the network using exactly the same Wifi connection as the computer running Firefox.

How can I figure out what’s going on?

Answer 1

You might want to create a single instance of the audio element for each sound:

var Sounds = {
    cat: new Audio('/sounds/meow.ogg'),
    bird: new Audio('/sounds/tweet.ogg')
};

Then you can play the same element over and over again:

function playSound(name) {
    Sounds[name].currentTime = 0;
    Sounds[name].play();
}

playSound('cat');

If iOS destroys your Audio objects, you could cache sound files in the cache manifest:

CACHE MANIFEST
# 2012-08-09:v1.3

NETWORK:
*

CACHE:
/sounds/meow.ogg
/sounds/tweet.ogg