Js / Html5 Audio: Why Is Canplaythrough Not Fired On IOS Safari?

i use the code below to preload an array of audio files (after user interacts with a button starting the process). After all audio files fired 'canplaythrough' the code proceeds: v

Solution 1:

Try calling the load() method after setting the src.

function preloadAudio(url)
{
  console.log("trying to preload "+ url);
  var audio = new Audio();
  // once this file loads, it will call loadedAudio()
  // the file will be kept by the browser as cache
  audio.addEventListener('canplaythrough', loadedAudio, false);

  audio.addEventListener('error', function failed(e)
  {
    console.log("COULD NOT LOAD AUDIO");
    $("#NETWORKERROR").show();
  });
  audio.src = url;

  audio.load();  // add this line
}

Solution 2:

Have you checked Network/Server and confirmed Safari is downloading the audio files?

If Safari's not downloading the audio (or only loading metadata instead of the full file), you could try setting audio.preload = 'auto' before setting audio.src

Solution 3:

I see a lot of claims to make an audio object work, especially on Safari!

To go quickly I can tell you that you do not need much, just know to run everything on Safari 5 and more, and all browsers.

1. Force the call to trough by reloading the first file in your list or file if you only use one. The Trough event is the one that will allow the user to read the file since it allows to know if the file is loaded and ready to be read. If you build a player, you must plan and let the user click on Play only if the through has occurred.

              ObjectAudio.src = file;

2. Use trough to update your player

   ObjectAudio.addEventListener ('canplaythrough', Function, false);

3. Use Progress to update the percentage buffering bar.

   ObjectAudio.addEventListener ('progress', Function, false);

4. Use the timeupdate event to update the read bar.

   ObjectAudio.addEventListener ('timeupdate', Function, false);

You do not need complex things as I see what you are doing.

---

** Just one worry about Safari 5 Widows. For the object to work, QuickTime must be installed on the user, otherwise Safari 5 will not recognize the HTML 5 Audio object.