CODEWITHSUNDEEP
javascriptipadhtml
zmbq
zmbq

Reputation: 39059

Delay when playing sounds on iPad

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?

Upvotes: 3

Views: 1588

Answers (2)

katspaugh
katspaugh

Reputation: 17919

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

Upvotes: 3

Petteri H
Petteri H

Reputation: 12252

How about moving the loading outside the handler e.g. make it global/preloaded? Then inside handler call play method only.

Upvotes: 2

Related Questions