1

I am working with html5 audio and running into some troubles with the buffer. This works splendidly in Chrome, however in Safari (and SafMob) there is noticeable latency. The idea is simple. A user clicks an img link and the img "jumps" and makes a sound. Here is an example.

Is there a way to preload the sound file so that it plays quicker? Again, my main concern is in the Safari/Safari Mobile browser.

The jQuery I am using:

$("#bell a").click(function() {
  var snd = new Audio("ping.mp3");
  snd.play();
  $(this).stop().animate({ marginTop: "-10px" }, 200).animate({ marginTop: "18px" }, 200).animate({ marginTop: "1px" }, 300); 
return false;
});

This is the code for the button:

<ul id="bell">
  <li class="button"><a href="#" title="Pling">Link Text</a></li>
</ul>
superUntitled
  • 22,351
  • 30
  • 83
  • 110

2 Answers2

1

Avoid creating a new Audio element each time you click by having it on a global variable, so you reuse the existing instance.

Then replace snd.play(); with snd.cloneNode(true).play();

For me it made a huge difference.

Abe
  • 11
  • 2
0

preload actually takes a value, one of auto, meta or automatic. Although I think the default behaviour is to download the entire file.

There's a bit more at: Playing with audio files or from the specification itself: preload attribute.

Not sure if this helps at all.

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73