使用 AJAX 加载 div 内容时 HTML5 音频不循环

【问题标题】：HTML5 Audio not looping when loading div content with AJAX使用 AJAX 加载 div 内容时 HTML5 音频不循环
【发布时间】：2012-01-24 13:26:16
【问题描述】：

在 HTML5 中播放循环音频就这么简单：

<html>
<head></head>
<body>
    <audio controls autoplay loop>
      <source src="../media/audio/timer.ogg" type="audio/ogg" />
      <source src="../media/audio/timer.mp3" type="audio/mpeg" />
    </audio>
</body>
</html>

好的，这在 Firefox 上不起作用，但有一些技巧。该示例适用于 Safari 和 Chrome，但这不是问题所在。问题是我正在使用 jQuery 的 load() 方法在某个 div 上加载相同的代码： $('#mydiv').load(url, function() {..});

当加载那段 HTML 代码时，会显示 div 并且可以正确听到音频文件（自动播放）...但它不会循环播放！虽然它在上面看到的小 html 示例上循环，但来自 AJAX 调用的相同代码根本不会循环。我知道它就在 DOM 中。我错过了什么吗？

【问题讨论】：

标签： jquery ajax html audio

【解决方案1】：

另一种方法是删除loop 属性并在onended 事件发生时重置新<audio> 元素的currentTime 属性。一个简单的 jquery 示例可能是这样的：

/* make ajax call and append audio element */
$('audio').on('ended', function() {
   this.currentTime = 0;
});

这样，每次他到达终点时，音频都会自动重新启动（这种行为几乎与原生循环相同）。

【讨论】：

我已经尝试过了，因为这就是循环在 Firefox 上的工作方式，但它不起作用。我试过这个：$('audio').on('ended', function() { alert("end!"); this.currentTime = 0; this.play(); }); 显示警报，但不管有没有 play() 它都不会循环。