HTML5音频循环

我最近一直在使用HTML5音频进行播放，尽管我可以播放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开发人员）和Firefox（4 beta 1）进行测试，这两者似乎都很乐意忽略我的循环请求。有任何想法吗？

更新：现在，所有主流浏览器都支持loop属性。

虽然loop已指定，但未在我知道的任何浏览器 Firefox [感谢Anurag指出了这一点]。这是应该在支持HTML5的浏览器中运行的另一种循环方式：

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

要结合@kingjeffrey和@CMS的建议添加更多建议：您可以使用loop可用的地方，并在不可用时使用kingjeffrey的事件处理程序。有一个很好的理由要使用loop而不编写自己的事件处理程序：正如Mozilla错误报告中所讨论的那样，尽管loop当前在我所知的任何浏览器中都无法无缝循环（没有间隙），但肯定有可能成为未来的标准。您自己的事件处理程序在任何浏览器中都将是无缝的（因为它必须在JavaScript事件循环中循环运行）。因此，最好尽可能使用loop而不是编写自己的事件。CMS在对Anurag答案的评论中指出，looploop 变量-如果支持，则为布尔值（false），否则为undefined，与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();

您的代码在Chrome（5.0.375）和Safari（5.0）上对我有效。不会在Firefox（3.6）上循环播放。

参见示例。

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

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事件监听器中将loop设置为true即可。

http://jsbin.com/ciforiwano/1/edit?html,css,js，输出

最简单的方法是：

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

尝试将jQuery用于事件侦听器，然后它将在Firefox中运行。

myAudio = new Audio('someSound.ogg');

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

myAudio.play();

这样的事情。

我是这样做的

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

它看起来像这样

这可行，切换上面的方法要容易得多：

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

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

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