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的浏览器中使用的另一种循环方式:

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();