为啥我的 HTML5 音频不会循环播放？
Posted
技术标签:
【中文标题】为啥我的 HTML5 音频不会循环播放？【英文标题】：Why won't my HTML5 audio loop?为什么我的 HTML5 音频不会循环播放？ 【发布时间】：2011-10-12 22:54:33 【问题描述】：在撰写本文时，该网站位于：http://ajf.me/stuff/eva。源代码是这样的：
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>eva</title>
</head>
<body style="background-color: black; background-image: url('eva.png'); background-repeat: no-repeat; background-position: center center; height: 100%; margin: 0px; padding: 0px;">
<audio autoplay loop>
<source src="eva.mp3" type="audio/mpeg" />
<source src="eva.ogg" type="audio/ogg" />
<source src="eva.wav" type="audio/wav" />
</audio>
</body>
</html>
音频在 Chrome、IE9 和 Firefox 中播放良好，但在后者中不循环播放。音频文件不能畸形，因为它是由 Audacity 制作的。为什么它不循环还有其他解释吗？
【问题讨论】：
自动关闭标签和autoplay="autoplay" loop="loop" doubled-Boolean-attribute business 只需要 XHTML，如果我没记错的话。 <audio autoplay loop> 应该是有效的 HTML5。不过，这几乎肯定与你的问题没有任何关系。
你用 尝试 id 只是为了测试？
试过了，同样的问题，没有循环。
在 Firebug 中，document.body.children[0].loop 是 undefined，而 document.body.children[0].autoplay 是 true，神秘地
【参考方案1】：
你可以这样做
<audio autoplay loop>
属性不需要有其他任何东西。
编辑
据此，Firefox 不喜欢loop。它提出了一个js解决方案：
document.getElementById('audio_2').addEventListener('ended', function()
this.currentTime = 0;
, false);
http://forestmist.org/2010/04/html5-audio-loops/
编辑
HTML5 音频循环现在可以与 firefox 一起使用。在 26.0 版本中确认（可能更早）
【讨论】：
我遇到了和 OP 一样的问题，同时使用了循环属性和事件监听器，现在可以在 FF、IE 和 Chrome 中使用。【参考方案2】：Firefox 还没有实现循环。我会检查您是否拥有最新版本的 Firefox，但我相信情况仍然如此。您可以检查它是否支持：
if (typeof new Audio().loop == 'boolean')
如果计算结果为 true，则在浏览器中实现循环。如果为假，则不是。将其添加到您的 javascript，在您的音频上放置一个 id 标记并使用该 if 语句检查循环。
if !(typeof new Audio().loop == 'boolean')
audioToLoop = document.getElementById('audio_id_here');
audioToLoop.addEventListener('ended', function ()
this.currentTime = 0;
this.play();
, false);
即使在不受支持的浏览器中，它也应该循环播放。
【讨论】：
以上是关于为啥我的 HTML5 音频不会循环播放？的主要内容，如果未能解决你的问题，请参考以下文章