<audio> Status abfragen, laden, starten

[Linuchs]

Moin,

ich habe mehrere <audio>-Tags als Spuren (Stimmen, Instrumente) desselben Lieds. Per Javascript möchte ich sie zeitgleich starten.

Sinn: Ein Sänger oder Instrumentalist (m/w/d) kann seinen/ihren/essen Part lauter stellen zum Üben, ein kleines Mischpult also.

Problem: Wenn die Audio-Dateien noch geladen werden müssen, fangen sie nicht zeitgleich an zu klingen.

Also möchte ich nach dem load-Event abfragen, ob die Dateien komplett vorhanden sind. Das sollten sie sein, wenn sie schon abgespielt wurden und damit im Cache liegen/sitzen/stehen.

Sind sie aber offenbar nicht, die Konsole zeigt, dass sie nach Neuladen der Seite und play jedesmal geladen werden. Weil ich preload="none" angebe?

Nach dem load-Event ergibt die Abfrage audio.readyState 0 = „keine Ahnung“.

Dann möchte ich die Datei laden, aber noch nicht abspielen. Erst wenn alle Spuren.mp3 komplett geladen sind, soll play befohlen werden.

So etwa:

var audi = document.getElementsByTagName( "audio" );
var audi_ungeladen = audi.length;
for ( let i=0; i<audi.length; i++ ) {
  if ( audi[i].readyState == 0 ) {
    audi[i].load;
  }
  // wenn readyState == 4, dann audi_ungeladen--
  // wie erfahre ich den Status?
}
// wenn ( audi_ungeladen == 0 ) ==> play

Irgendwie komme ich nicht weiter, weil ich keine umfangreiche Info gefunden habe, wie Javascript die media abfragen und steuern kann.

Auf readyState bin ich auch nur zufällig gestoßen.

Bitte um Unterstützung

Gruß, Linuchs