HTML5audio循环

我最近一直在玩HTML5audio，虽然我可以让它发挥它只能播放一次的声音。 无论我尝试（设置属性，事件处理程序等），我似乎无法让它循环。

这是我正在使用的基本代码：

//myAudio is declared at a global scope, so it doesn't get garbage collected. myAudio = new Audio('someSound.ogg'); myAudio.loop = true; myAudio.play(); 

我正在使用Chrome（6.0.466.0 dev）和Firefox（4 beta 1）进行testing，两者似乎都很乐意忽略我的循环请求。 有任何想法吗？

更新 ：现在，所有主stream浏览器都支持循环属性。

Answer 1

while loop被指定，但是没有被执行 任何我知道的浏览器 Firefox [感谢Anurag指出这一点] 。 这是循环的另一种方式，应该在支持HTML5的浏览器中工作：

 myAudio = new Audio('someSound.ogg'); myAudio.addEventListener('ended', function() { this.currentTime = 0; this.play(); }, false); myAudio.play(); 

Answer 2

要结合@kingjeffrey和@CMS的build议来添加更多的build议：你可以在有可用的地方使用loop ，如果不是的话，可以使用kingjeffrey的事件处理器。 有一个很好的理由，你为什么要使用loop而不是写你自己的事件处理程序：正如在Mozilla的错误报告中所讨论的，虽然目前循环无缝循环（没有间隙）在任何浏览器，我知道，这当然是可能的，很可能在未来成为标准。 您自己的事件处理程序在任何浏览器中都不会无缝连接（因为它必须通过JavaScript事件循环进行抽取）。 因此，尽可能使用loop而不是编写自己的事件。 正如CMS在Anurag的回答中指出的那样，您可以通过查询loopvariables来检测对loop的支持 – 如果它支持，它将是一个布尔值（false），否则它将是未定义的，因为它目前在Firefox中。

把这些放在一起：

 myAudio = new Audio('someSound.ogg'); if (typeof myAudio.loop == 'boolean') { myAudio.loop = true; } else { myAudio.addEventListener('ended', function() { this.currentTime = 0; this.play(); }, false); } myAudio.play(); 

Answer 3

您的代码适用于Chrome（5.0.375）和Safari（5.0）。 不在Firefox上循环（3.6）。

看例子。

 var song = new Audio("file"); song.loop = true; document.body.appendChild(song);​ 

Answer 4

 var audio = new Audio("http://rho.nu/pub/Game%20Of%20Thrones%20-%20Main%20Theme%20-%20Soundtrack.mp3"); audio.addEventListener('canplaythrough', function() { this.currentTime = this.duration - 10; this.loop = true; this.play(); }); 

只需在canplaythrough eventlistener中设置loop = true即可。

http://jsbin.com/ciforiwano/1/edit?html,css,js,output

Answer 5

尝试使用jQuery作为事件监听器，它将在Firefox中工作。

 myAudio = new Audio('someSound.ogg'); $(myAudio).bind('ended', function() { myAudio.currentTime = 0; myAudio.play(); }); myAudio.play(); 

就是这样

Answer 6

我这样做了，

 <audio controls="controls" loop="loop"> <source src="someSound.ogg" type="audio/ogg" /> </audio> 

看起来像这样

Answer 7

这可以工作，切换上面的方法更容易：

使用内联： onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"

通过$(audio_element).attr('data-loop','1');打开循环$(audio_element).attr('data-loop','1'); 通过$(audio_element).removeAttr('data-loop');closures$(audio_element).removeAttr('data-loop');

Answer 8

如果你知道声音的确切长度，你可以试试setInterval。 您可以让setInterval每隔x秒播放一次声音。 X将是你的声音的长度。