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.
javascript
html
html5-audio
Toji
quelle
quelle
currentTime
vor dem Anruf 0 gesetzt wirdplay
. Ist das notwendigcurrentTime
.Antworten:
Während
loop
angegeben, ist es nicht implementiert inJeder Browser, den ich kenneFirefox [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();
quelle
this.startTime
, um zur frühesten verfügbaren Zeit zurückzukehren..currentTime
benötigt wird, hängt damit zusammen, wie die Spezifikation das Ende eines Songs behandelt. Browser sollen das Lied einfach anhalten. Die Wiederaufnahme des Spiels geschieht also am Ende des Songs. Der Abspielkopf muss zurückgesetzt werden..currentTime
arbeiten. Innerhalb der Rückruffunktion können Sie einfachmyAudio
dieselbe Datei neu deklarieren und erneut abspielen. Durch erneutes Deklarieren sollte auch der Abspielkopf auf den Anfang des Songs zurückgesetzt werden.Um weitere Ratschläge hinzuzufügen, die die Vorschläge von @kingjeffrey und @CMS kombinieren: Sie können verwenden,
loop
wo es verfügbar ist, und auf den Ereignishandler von kingjeffrey zurückgreifen, wenn dies nicht der Fall ist. Es gibt einen guten Grund, warum Sieloop
Ihren eigenen Ereignishandler verwenden und nicht schreiben möchten : Wie im Mozilla-Fehlerbericht erläutert , ist diesloop
derzeit 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,loop
wenn möglich zu verwenden , anstatt eine eigene Veranstaltung zu schreiben. Wie CMS in einem Kommentar zu Anurags Antwort betonte,loop
loop
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();
quelle
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);
quelle
loop
wusste nicht , dass im Webkit implementiert wurde.loop
unterstützt wird, z. B.:typeof new Audio().loop == 'boolean';
==
und Verwendung===
, es ist ein besserer Bediener für Anfänger und eine bessere Leistung.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
quelle
Der einfachste Weg ist:
bgSound = new Audio("sounds/background.mp3"); bgSound.loop = true; bgSound.play();
quelle
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.
quelle
Ich habe es so gemacht,
<audio controls="controls" loop="loop"> <source src="someSound.ogg" type="audio/ogg" /> </audio>
und es sieht so aus
quelle
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');
quelle
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.
quelle