<音频>.如果内容加载过快，addEventListener进程将无法启动

<audio>.addEventListener progress fails to fire off if content loads too quickly

本文关键字：addEventListener 进程 启动 加载 音频 lt gt 如果      更新时间：2023-09-26

我以前从未想过快速加载内容会是一个问题，但我遇到了一个打击性的问题。

我制作了一个HTML5音乐播放器，如果内容以正常速度加载，"缓冲"条可以正常工作，但如果内容加载非常快，即通过局域网加载，那么听众的反应就不够快，无法做任何事情。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%之间（随机）。测试音频文件是局域网上另一台机器上的6.9MB质量的6 OGG Vorbis编码音轨，由Apache 2.2.22盒子提供。

值得注意的是，如果你尝试将音频文件与网页托管在同一台机器上，它将无法工作，因为它加载得太快（它会立即触发100%完成）。因此，似乎只有当A）文件没有立即加载，B）加载速度不够慢，处理程序无法不断启动时，才会发生这种情况。

据我所见，您尝试做的应该是有效的。根据规范：

一旦提取了整个媒体资源（但可能在任何媒体资源解码之前）在媒体元素上激发一个名为progress的简单事件。

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

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

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

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

以下是我每晚在Firefox上用python -m SimpleHTTPServer 8000作为HTTP服务器测试的代码（bunny.ogg取自此处）：

<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>
相关文章：
  • 没有找到相关文章