Html5 Audio: schnelles Wiederholen eines Sounds

Donnerstag, 1. Mai, 2014

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