Mac 桌面版 Safari：HTML 5 音频“结束”事件不触发问题

发布于 2024-11-29 16:17:06 字数 344 浏览 1 评论 0原文

我只想使用 HTML5 音频功能顺序播放多个音频文件。每次播放结束时，都会触发“结束”事件以加载下一个音频。但在桌面版 Safari 5.1（Mac 上）中，我发现“结束”事件仅在第一次播放结束时触发。加载并播放第二个音频后，即使音频播放完成，“结束”事件也不会再次触发（我通过“timeupdate”事件跟踪此事件）。即使我手动播放任何其他音频文件，“结束”事件也不会再次触发。但在Chrome和mobile safari中，这个问题似乎不存在，音频播放器可以从第一个音频连续播放到最后一个音频。这是 Mac OS X 的 Safari 5.1 的错误吗？（我没有在Windows中测试）

目前，我只能使用“timeupdate”事件来检查播放是否结束。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

睫毛上残留的泪 2024-12-06 16:17:06

是的，这是一个烦人的错误。您可以通过更改每个文件的音频元素的 id 来解决此问题。下面是一些示例代码，您可以了解一下：

<div id="audioDiv">
 <audio id="audio0" src="">
  <h1>Your browser does not support the audio tag.</h1>
 </audio>
</div>

<script>
var audioCounter = 0;

function next() {
 audioCounter++;
 document.getElementById('audioDiv').innerHTML = '<audio id="audio' + audioCounter + '" src="file.mp3"></audio>';
 document.getElementById('audio' + audioCounter).addEventListener('ended', next, false);
 document.getElementById('audio' + audioCounter).play();
 }

</script>

Yes this is an annoying bug. You can work around this by changing the id of the audio element for each file. Here is some sample code to get an idea:

<div id="audioDiv">
 <audio id="audio0" src="">
  <h1>Your browser does not support the audio tag.</h1>
 </audio>
</div>

<script>
var audioCounter = 0;

function next() {
 audioCounter++;
 document.getElementById('audioDiv').innerHTML = '<audio id="audio' + audioCounter + '" src="file.mp3"></audio>';
 document.getElementById('audio' + audioCounter).addEventListener('ended', next, false);
 document.getElementById('audio' + audioCounter).play();
 }

</script>

回复收藏 0 原文

~没有更多了~