javascript - js/html5 音频 : Why is canplaythrough not fired on iOS safari?

Question

我使用下面的代码预加载一组音频文件(在用户与启动该过程的按钮交互之后)。在所有音频文件触发“canplaythrough”后，代码继续:

var loaded = 0;
function loadedAudio() {
    // this will be called every time an audio file is loaded
    // we keep track of the loaded files vs the requested files
    loaded++;
    console.log(loaded + " audio files loaded!");
    if (loaded == audioFiles.length){
      // all have loaded
      main();
    }
}

function preloadsounds()
{
  $("#loader").show();
  console.log(level.config);
  audioFiles = level.config.soundfiles;

  // we start preloading all the audio files with html audio
  for (var i in audioFiles) {
      preloadAudio(audioFiles[i]);
  }

}

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;
}

在 Android(Chrome 和 Firefox)上运行良好，但在 iOs Safari 上没有触发一个 canplaythrough 事件(在 5s 上实时测试并模拟 X 和 11.x)。所有文件均来自同一来源。我的日志中也没有收到任何错误消息。

我错过了什么？

(上面代码的基础来自:https://stackoverflow.com/a/31351186/2602592)

Answer 1

尝试调用 load()设置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
}