webentwicklung-frage-antwort-db.com.de

HTML5 Audio Looping

Ich habe kürzlich mit HTML5-Audio gespielt, und obwohl ich den Sound damit wiedergeben kann, wird er nur einmal abgespielt. Unabhängig davon, was ich versuche (Festlegen der Eigenschaften, Ereignisbehandlungsroutinen usw.), scheint es nicht möglich zu sein, eine Schleife zu erstellen.

Hier ist der Basiscode, 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 einer Schleife gerne ignorieren.

[~ # ~] Update [~ # ~] : Die Loop-Eigenschaft wird jetzt nterstützt in allen gängigen Browsern.

javascripthtml5html5-audio
73
Toji

Während loop angegeben ist, ist es in nicht implementiert jeder mir bekannte Browser Firefox [danke Anurag für den Hinweis]. Hier ist eine alternative Methode zum Schleifen, die in HTML5-fähigen Browsern funktionieren sollte:

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

Um einige weitere Ratschläge hinzuzufügen, die die Vorschläge von @kingjeffrey und @CMS kombinieren: Sie können loop verwenden, wo es verfügbar ist, und auf die Ereignisbehandlungsroutine von kingjeffrey zurückgreifen, wenn dies nicht der Fall ist. Es gibt einen guten Grund, warum Sie loop verwenden und keinen eigenen Event-Handler schreiben möchten: Wie im Mozilla-Fehlerbericht beschrieben, während loop derzeit keine Schleife ausführt nahtlos (ohne eine Lücke) in jedem mir bekannten Browser ist es sicherlich möglich und wird wahrscheinlich in Zukunft Standard werden. Ihr eigener Event-Handler wird in keinem Browser nahtlos funktionieren (da er durch die JavaScript-Ereignisschleife laufen muss). Daher ist es am besten, loop zu verwenden, anstatt ein eigenes Ereignis zu schreiben. Wie CMS in einem Kommentar zu Anurags Antwort ausführte, können Sie die Unterstützung für loop ermitteln, indem Sie die Variable loop abfragen. Wenn dies unterstützt wird, ist dies ein Boolescher Wert (false), andernfalls wird dies der Fall undefiniert sein, wie es derzeit in Firefox ist.

Diese zusammenfassen:

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

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

Siehe Beispiel.

var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);​
17
Anurag
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();
});

Setze einfach loop = true im canplaythrough eventlistener.

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

3
JazzCat

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

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

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

myAudio.play();

Sowas in der Art.

2
Matt

Ich habe es so gemacht,

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

und es sieht so aus

enter image description here

1
Tomarinator

Der einfachste Weg ist:

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

Sie könnten ein setInterval ausprobieren, wenn Sie die genaue Länge des Klangs kennen. Sie können festlegen, dass das setInterval den Sound alle x Sekunden abspielt. X wäre die Länge Ihres Sounds.

0
Zack

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

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

Aktivieren Sie die Schleife mit $(audio_element).attr('data-loop','1'); Deaktivieren Sie die Schleife mit $(audio_element).removeAttr('data-loop');

0
WebsterDevelopine