HTML5 Audio Looping

Ich habe in letzter Zeit mit HTML5-Audio gespielt, und obwohl ich es dazu bringen kann, den Sound abzuspielen, wird es immer nur einmal abgespielt. Egal was ich versuche (Festlegen der Eigenschaften, Ereignishandler usw.), ich kann es scheinbar nicht in eine Schleife bringen.

Hier ist der grundlegende Code, den ich verwende:

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

Ich teste mit Chrome (6.0.466.0 dev) und Firefox (4 Beta 1), die beide meine Anfragen nach Schleifen gerne ignorieren. Irgendwelche Ideen?

UPDATE : Die Schleife Eigenschaft wird jetzt unterstützt in allen gängigen Browsern.

Während loopangegeben, ist es nicht implementiert inJeder Browser, den ich kenne Firefox [danke Anurag für den Hinweis] . Hier ist eine alternative Art der Schleife, die in HTML5-fähigen Browsern funktionieren sollte:

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

Um weitere Ratschläge hinzuzufügen, die die Vorschläge von @kingjeffrey und @CMS kombinieren: Sie können verwenden, loopwo es verfügbar ist, und auf den Ereignishandler von kingjeffrey zurückgreifen, wenn dies nicht der Fall ist. Es gibt einen guten Grund, warum Sie loopIhren eigenen Ereignishandler verwenden und nicht schreiben möchten : Wie im Mozilla-Fehlerbericht erläutert , ist dies loopderzeit möglich und wahrscheinlich , obwohl er in keinem mir bekannten Browser nahtlos (ohne Lücke) wiederholt wird in Zukunft zum Standard werden. Ihr eigener Ereignishandler wird in keinem Browser nahtlos sein (da er durch die JavaScript-Ereignisschleife pumpen muss). Daher ist es am besten, loopwenn möglich zu verwenden , anstatt eine eigene Veranstaltung zu schreiben. Wie CMS in einem Kommentar zu Anurags Antwort betonte,looploop Variable - Wenn es unterstützt wird, ist es ein Boolescher Wert (false), andernfalls ist es undefiniert, wie es derzeit in Firefox ist.

Zusammenfügen:

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

Ihr Code funktioniert für mich unter Chrome (5.0.375) und Safari (5.0). Schleift nicht in Firefox (3.6).

Siehe Beispiel.

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

Setzen Sie einfach loop = true im canplaythrough eventlistener.

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

Der einfachste Weg ist:

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

Versuchen Sie, jQuery für den Ereignis-Listener zu verwenden. Dies funktioniert dann in Firefox.

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

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

myAudio.play();

So ähnlich.

Ich habe es so gemacht,

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

und es sieht so aus

Dies funktioniert und es ist viel einfacher, die oben genannten Methoden umzuschalten:

Inline verwenden: onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"

Schalten Sie die Schleife ein durch $(audio_element).attr('data-loop','1'); Schalten Sie die Schleife aus aus$(audio_element).removeAttr('data-loop');

Sie können ein setInterval ausprobieren, wenn Sie die genaue Länge des Sounds kennen. Sie können das SetInterval den Sound alle x Sekunden abspielen lassen. X wäre die Länge Ihres Sounds.