Chrome中的音频元素错误：没有“已结束”事件且已消失时间

Question

我有以下HTML和JS：

<script>
  function onEnded(ev) {
    window.location.reload();
  }
</script>

<audio id="audio-element" controls autoplay onended="onEnded();">
  <source src="/stream/3" type="audio/mp3" />
</audio>

对于某些MP3流，这非常有效;播放开始，音频曲目结束时onEnded被调用。对于其他人，播放开始正常并且播放音频文件，但是在结束时，经过时间计数器变得非常消极，ended事件永远不会触发，audio_element.ended返回false。这是一个截图：

这种情况发生在Chrome中，但不是Safari或Firefox，其行为符合预期。知道我在Chrome中可以做些什么来使ended事件发生火灾吗？

Answer 1

我们在Chrome上遇到了一个非常类似的问题 - 这个浏览器不会在新的Chrome 64（以及测试版65，金丝雀66）中发出引发的事件，但是当我们用流重建MP3时，这个问题就消失了。

Answer 2

您必须确保您的服务器接受范围转移，否则Chrome将无法正确评估时间，因此“已结束”事件不会触发。

您可以通过执行以下操作来检查：

 curl --head -X GET http://yourmp3location

如果你看到：

 Accept-Ranges: bytes

然后没问题，否则修复你的服务器

另外，你试过这个吗？

<audio id="audio-element" controls autoplay onended="onEnded">

我更改了onended属性，以便浏览器在渲染页面时不会重新评估onended功能。

您还可以删除标记音频的onended属性，并将其添加到页面底部：

<script type="text/javascript">
   document.getElementById("audio-element").addEventListener('ended', function(ev) {
       window.location.reload();
   }, false);
</script>

Answer 3

尝试处理移动Chrome上的音频时出现类似问题： 当我通过javascript（通过GWT）创建音频元素时，onended事件永远不会为我开火。然而，我能够开始工作：我的问题是它没有附加到DOM（如果我正确理解结构），而是浮动在javascript limbo中。一旦我将元素设置为display：none并将其添加到页面元素中，我的onended处理程序就能正常工作。

TL;博士
如果你的元素没有直接附加到DOM元素，请尝试隐藏它并附加它（真的在任何地方）。