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 答案的评论中指出的那样，您可以通过查询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) 上循环。

参见示例。

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,output

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).attr('data-loop','1'); 通过$(audio_element).removeAttr('data-loop');关闭$(audio_element).removeAttr('data-loop');

Answer 9

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

Answer 10

现在每个人都知道如果您键入：

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

它会播放歌曲并且会循环播放但是有一种更短的方法可以连续播放歌曲：

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