Html5 Audio: schnelles Wiederholen eines Sounds
Kürzlich hatte ich etwas zur Wiederholung von loopenden HTML5 Audios geschrieben. Beim Schreiben der elektronischen Osterkarte kämpfte ich noch mit einem anderen Audio-Problem: Mit Klick auf ein Element sollte ein Sound wiedergegeben werden. Im Onclick Event eines Bildes wird nachfolgende Funktion aufgerufen. Diese holt aus einem Spielfeld-Array die Information, ob es ein neu aufgedecktes Feld ist und spielt einen entsprechenden Sound durch Ansteuern eines (in der Seite bereits vorhandenen) Audioobjektes:
function clickimage(oLink) {
(...)
iClickCounter++;
var oAudio = false;
var oField = aFields[oLink.id];
(...)
if (oField["active"]) {
// scream yeah!
(...)
oAudio=document.getElementById("audioclickok");
oAudio.currentTime=0;
oAudio.play();
(...)
} else {
// oh no!
(...)
var sSoundid=oField["done"]?"audioclickremoved":"audioclickfailed";
oAudio=document.getElementById(sSoundid);
oAudio.play();
(...)
}
(...)
}
Hey es spielt! Aber eher schlecht als recht. Bei mehrfachen Klicks gibt es äusserst unschöne Effekte. Es hakt - die Wiedergabe ist nicht synchron.
Eine Abhilfe wäre web-API. Oder man stehert die Wiedergabe ein und desselben Audiofiles über mehrere Audio-Objekte.
Oder: man setzt vor der Play-Methode die Abspielposition auf Null.
(...) oAudio=document.getElementById(sSoundid); oAudio.currentTime=0; oAudio.play(); (...)
Der Unterschied ist wirklich frappant!
Weiterführende Links