Search code examples
javascripthtmlmobile-safarimediapreload

Why does the browser load audio files several times even after preload?

i am monitoring the network on Safari mobile for a Web App we are developing and see this:

enter image description here

the files get preloaded before (I guess this is why it says "(disk)" in the first of the 3 lines), and this is the network output in safari's web inspector in the network tab.

Now I am wondering, why the browser seems to load it first from disk then two times(?) from the url again.

Am I reading the output wrong?

preloading happens like this (on user interaction):

function preloadAudio(url)
{
  console.log("trying to preload "+ url);
  var audio = new Audio();
  loadedAudioFiles.push(audio);

  audio.addEventListener('canplaythrough', loadedAudio, false);

  audio.src = url;
  audio.load();
  audio.onerror = function failed(e)
  {
    console.log(e);
    $("#NETWORKERROR").show();
  };
}
Solution

  • i should have dug deeper.

    sadly found this quote

    Note: The preload attribute is supported in Safari 5.0 and later. Safari on iOS never preloads.

    from: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html

    it seems even this statement is wrong though: I often get preloaded audio files into my system (checking by cutting the connection after the preload function ran and then triggering the sounds works). But Safari mobile seems to do some background magic to decide when to load files and when not. :-(