HTML5音频循环

Question

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

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

//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）进行测试，两者似乎都乐于忽略我的循环请求。有什么想法吗？

更新：所有主流浏览器中的循环属性现在都是supported。

Answer 1

虽然指定了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的建议添加更多建议：你可以在loop可用的地方使用它，然后在没有的情况下回到kingjeffrey的事件处理程序。您有充足的理由想要使用loop而不是编写自己的事件处理程序：如Mozilla bug report中所述，而loop目前无法无缝循环（无间隙）我所知道的任何浏览器，它当然有可能并且有可能成为未来的标准。您自己的事件处理程序永远不会在任何浏览器中无缝（因为它必须通过JavaScript事件循环）。因此，最好尽可能使用loop而不是编写自己的事件。正如CMS在对Anurag的回答的评论中指出的那样，您可以通过查询loop变量来检测对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）上循环。

See example.

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

最简单的方法是：

bgSound = new Audio("sounds/background.mp3");
bgSound.loop = true;
bgSound.play();

Answer 8

这很有效，切换上述方法要容易得多：

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

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

关闭循环

Answer 9

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