js / html5 音频：为什么 canplaythrough 没有在 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).所有文件均来自同一来源。我的日志中也没有收到任何错误消息。

我错过了什么？

（上面代码的基础来自：）

Answer 1

您是否已检查 Network/Server 并确认 Safari 正在下载音频文件？

如果 Safari 没有下载音频（或只加载元数据而不是完整文件），您可以尝试在设置 audio.src

之前设置 audio.preload = 'auto'

Answer 2

尝试在设置 src 后调用 load() 方法。

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
}

Answer 3

我看到很多声称可以使音频对象正常工作，尤其是在 Safari 上！

要快点，我可以告诉你，你不需要太多，只需要知道运行 Safari 5 及更多版本以及所有浏览器上的所有内容。

通过重新加载列表中的第一个文件或文件（如果您只使用一个文件）来强制调用低谷。 Trough 事件是允许用户读取文件的事件，因为它允许知道文件是否已加载并准备好读取。如果您构建播放器，则必须计划并让用户仅在发生直通时才点击播放。

ObjectAudio.src = file;
使用槽更新你的播放器

ObjectAudio.addEventListener ('canplaythrough', Function, false);
使用 Progress 更新百分比缓冲栏。

ObjectAudio.addEventListener ('progress', Function, false);
使用timeupdate事件更新阅读栏。

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

我看到你在做什么，你不需要复杂的东西。

js / html5 音频：为什么 canplaythrough 没有在 iOS Safari 上触发？

js / html5 audio: Why is canplaythrough not fired on iOS safari?

html

javascript

html5-audio

** 只是担心 Safari 5 Widows。要使该对象起作用，用户必须安装 QuickTime，否则 Safari 5 将无法识别 HTML 5 音频对象。