javascript - 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) 进行测试，这两者似乎都乐于忽略我的循环请求。有任何想法吗？

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

Answer 1

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

var 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 错误报告中所讨论的那样，虽然loop目前在我所知道的任何浏览器中都没有无缝循环（没有间隙），但它肯定是可能的并且很可能成为未来的标准。您自己的事件处理程序在任何浏览器中都不会是无缝的（因为它必须通过 JavaScript 事件循环来循环）。因此，最好尽可能使用loop而不是编写自己的事件。正如 CMS 在对 Anurag 回答的评论中指出的那样，looploop变量——如果支持，它将是一个布尔值 (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

最简单的方法是：

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

Answer 5

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,输出

Answer 6

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

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

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

myAudio.play();

类似的东西。

Answer 7

我是这样做的，

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

它看起来像这样

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 将是您声音的长度。