html5怎么写循环,HTML5音频循环

9 个答案:

答案 0 :(得分：104)

虽然指定了loop，但它并未在任何我知道的浏览器中实现 Firefox [感谢Anurag指出这一点]。这是一种可以在支持HTML5的浏览器中使用的另一种循环方式：

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

myAudio.addEventListener('ended', function() {

this.currentTime = 0;

this.play();

}, false);

myAudio.play();

答案 1 :(得分：61)

结合@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();

答案 2 :(得分：17)

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

var song = new Audio("file");

song.loop = true;

document.body.appendChild(song);​

答案 3 :(得分：3)

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。

答案 4 :(得分：2)

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

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

$(myAudio).bind('ended', function() {

myAudio.currentTime = 0;

myAudio.play();

});

myAudio.play();

这样的事情。

答案 5 :(得分：1)

我是这样做的，

它看起来像这个

答案 6 :(得分：1)

最简单的方法是：

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

bgSound.loop = true;

bgSound.play();

答案 7 :(得分：0)

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

答案 8 :(得分：0)

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

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

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

按$(audio_element).removeAttr('data-loop');关闭循环