Zapętlanie dźwięku HTML5

Ostatnio bawiłem się dźwiękiem HTML5 i chociaż mogę go zmusić do odtwarzania dźwięku, będzie on odtwarzany tylko raz. Bez względu na to, co próbuję (ustawianie właściwości, programów obsługi zdarzeń itp.) Nie wydaje się, żebym zapętlał to.

Oto podstawowy kod, którego używam:

//myAudio is declared at a global scope, so it doesn't get garbage collected.
myAudio = new Audio('someSound.ogg');
myAudio.loop = true;
myAudio.play();

Testuję na Chrome (6.0.466.0 dev) i Firefox (4 beta 1), z których oba wydają się być szczęśliwe, ignorując moje żądania zapętlenia. Jakieś pomysły?

UPDATE : Właściwość loop jest teraz obsługiwana we wszystkich głównych przeglądarkach.

Chociaż loopjest określony, nie jest zaimplementowany w programiejakąkolwiek przeglądarkę, którą znam Firefox [dziękuje Anurag za wskazanie tego] . Oto alternatywny sposób zapętlania, który powinien działać w przeglądarkach obsługujących HTML5:

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

Aby dodać więcej porad łączących sugestie @kingjeffrey i @CMS: Możesz użyć looptam, gdzie jest dostępny, i wrócić do obsługi zdarzeń kingjeffrey, gdy nie jest. Jest dobry powód, dla którego chcesz używać loopi nie pisać własnego modułu obsługi zdarzeń: jak omówiono w raporcie o błędzie Mozilli , chociaż loopobecnie nie jest to płynna pętla (bez przerwy) w żadnej przeglądarce, którą znam, z pewnością jest to możliwe stać się standardem w przyszłości. Twój własny moduł obsługi zdarzeń nigdy nie będzie działał bezproblemowo w żadnej przeglądarce (ponieważ musi przepływać przez pętlę zdarzeń JavaScript). Dlatego najlepiej jest używać, loopjeśli to możliwe, zamiast pisać własne wydarzenie. Jak wskazał CMS w komentarzu do odpowiedzi Anurag,looploop zmienna - jeśli jest obsługiwana, będzie wartością logiczną (fałsz), w przeciwnym razie będzie niezdefiniowana, tak jak obecnie jest w Firefoksie.

Składając je razem:

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

Twój kod działa u mnie w Chrome (5.0.375) i Safari (5.0). Nie zapętla się w przeglądarce Firefox (3.6).

Zobacz przykład.

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

Po prostu ustaw loop = true w programie canplaythrough eventlistener.

http://jsbin.com/ciforiwano/1/edit?html,css,js,output

Najprostszy sposób to:

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

Spróbuj użyć jQuery jako nasłuchiwania zdarzeń, będzie wtedy działać w przeglądarce Firefox.

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

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

myAudio.play();

Coś w tym stylu.

Zrobiłem to w ten sposób

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

i wygląda to tak

To działa i znacznie łatwiej jest przełączać powyższe metody:

użyj w tekście: onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"

Włącz pętlę przez $(audio_element).attr('data-loop','1'); Wyłącz pętlę przez$(audio_element).removeAttr('data-loop');

Możesz spróbować setInterval, jeśli znasz dokładną długość dźwięku. Możesz ustawić setInterval na odtwarzanie dźwięku co x sekund. X byłby długością twojego dźwięku.