javascript - 如果内容加载太快，.addEventListener 进度将无法启动

Question

我以前从未想过快速加载内容会成为一个问题，但我遇到了一个奇怪的问题。

我制作了一个 HTML5 音乐播放器，如果内容以正常速度加载，“缓冲”栏工作正常，但如果内容加载得非常快，即通过 LAN，那么听众的响应速度就不够快做任何事情。 addEventListener 位于 jQuery 文档就绪函数内。我正在使用的代码如下:

audio.addEventListener('progress', function() {
    if(audio.duration && audio.buffered.end(0)) {
        if(resuming == 1) {
            resuming = 0;
            resumeplaypos = ReadCookie('resumeplaypos');
            audio.currentTime = resumeplaypos;
        }
        loaded = (audio.buffered.end(0) / audio.duration) * 100;
        $('.player-loaded').width(loaded + '%');
        console.log('Loaded: ' + loaded);
    }
}, false);

现在通常发生的情况是(使用 console.log 检查)这只触发一次，通常在 10% 到 20% 之间。因此，尽管整个轨道已加载，但我的缓冲栏仍停留在该值。在极少数情况下，它可能会成功发射两次，输出:

[11:37:42.323] Loaded: 7.525227180155711 @ http://topaz:88/music.js:316
[11:37:42.605] Loaded: 59.57557430800252 @ http://topaz:88/music.js:316

但通常情况是这样的:

[11:39:52.773] Loaded: 13.313090306445885 @ http://topaz:88/music.js:316

有什么方法可以使进度监听器更加可靠，还是我必须以其他方式解决这个问题？ (或者我在做一些愚蠢的事情)。

您可以忽略恢复代码，这是我正在研究的其他内容，当有人返回页面时恢复轨道，在这种情况下不使用它。

当通过以下行加载 JS 文件时，将立即创建音频元素:

var audio = document.createElement("audio");

我已将代码移至文档就绪函数之外，并将控制台日志添加到 if 检查之外的进度，但行为仍然像以前一样模仿内部日志记录:

[10:49:24.698] 31.702494 / 276.8 @ http://topaz:88/music.js:302
[10:49:24.728] 31.702494 / 276.8 @ http://topaz:88/music.js:302

使用时:

console.log(audio.buffered.end(0) + " / " + audio.duration);

尽管奇怪的是，当第二个值显然应该是“完成”值时，它两次报告相同的值。浏览器是Firefox 11，Apache服务器(2.2.22)。请注意，我现在的成功失败率为 50/50(成功是指最终报告已加载 100%)。

我在这里放置了示例代码 - https://xnode.org/paste/12 (我不知道如何让 jsfiddle 正确运行它，而且无论如何它都会丢失音频文件) - 这以尽可能简约的方式显示了相同的行为。

5 次中只有 2 次(通过 Ctrl+F5 刷新)触发了 100% 完成结果。另外 3 次，它在 10% 到 40% 之间(随机)发射一次。测试音频文件是 LAN 上另一台机器上的 6.9MB 质量 6 OGG Vorbis 编码轨道，由 Apache 2.2.22 盒子提供服务。

值得注意的是，如果您尝试将音频文件托管在与网页相同的计算机上，它将无法工作，因为它加载得太快(它会立即触发 100% 完成)。因此，似乎只有在以下情况下才会发生这种情况:A) 文件没有立即加载，并且 B) 文件加载速度不够慢，无法让处理程序不断地不断触发。

Answer 1

据我所知，您尝试做的事情应该有效。每the specification :

Once the entire media resource has been fetched (but potentially before any of it has been decoded) Fire a simple event named progress at the media element.

我在 Firefox 中看到了相关代码:

   // Ensure a progress event is dispatched at the end of download.

尝试记录duration和audio.buffered与任何 if 之外的监听器分开s -- 在我的测试中 duration可以是NaN或Infinity此时最终进度事件触发。

如果这没有帮助，我建议提及浏览器、HTTP 服务器、您使用的音频格式，并提供一个简化的测试用例。

这是我在 Firefox nightly 上使用 python -m SimpleHTTPServer 8000 进行测试的代码作为 HTTP 服务器(bunny.ogg 取自 here ):

<audio src="bunny.ogg" controls>

</audio>

<script>
  var audio = document.getElementsByTagName("audio")[0];
  audio.addEventListener("progress", onProgress, false);

  function onProgress() {
    var loaded = (audio.buffered.end(0) / audio.duration) * 100;
    console.log(audio.buffered.end(0) + " / " + audio.duration + " * 100 = " + loaded);
  }
</script>