2

我有以下 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 音频播放器错误

这发生在 Chrome 中，但不是 Safari 或 Firefox，它们的行为与预期相同。知道我可以在 Chrome 中做什么来使ended事件触发吗？

4

3 回答 3

1

您必须确保您的服务器接受范围传输，否则 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>
于 2013-07-15T15:47:41.553 回答
1

我们在 Chrome 上遇到了一个非常相似的问题——这个浏览器在新的 Chrome 64（和 beta 65、canary 66）中不会发出 onended 事件，但是当我们用流重建 MP3 时，这个问题就消失了。

于 2018-02-21T20:55:06.500 回答
0

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

tl;博士
如果您的元素没有直接附加到 DOM 元素，请尝试隐藏它并附加它（实际上是在任何地方）。

于 2014-05-08T18:18:27.947 回答