<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

[klawischnigg]

Hi there,

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.

Ich fürchte, Dein Vorhaben ist prinzipbedingt zum Scheitern verurteilt. Ich denke nicht, daß Du mit dem html-audio-Element ein Mischpult realisieren kannst, weil Du keinerlei Synchronisiermöglichkeiten hast und Du Dir browser- und verbindungsmäßige Latenzen einhandeln wirst. Bei einer einzigen Audiospur ist es egal, ob sie ein paar Millisekunden (oder gar eine Sekunde) früher oder später startet, bei mehreren kann das (Instrumenteneinsatz!) fatal sein.

Du kannst diesen Effekt übrigens sehr gut kontrollieren, wenn Du ein und dieselbe Audio-Datei mehrfach startest - dann wirst Du die seltsamsten Interferenzen 'raushören (aber auch nur, wenn der Unterschied nicht zu groß ist, ist das der Fall, dann hört sich die Geschichte einfach falsch an). Ich hab' einmal einen Javascript-Ablauf vom Timecode der (einer) Audio-Datei steuern lassen (also quasi den Timecode als Eventgeber verwendet), das war aber einfach nie so exakt hinzubekommen, wie's eigentlich nötig gewesen wäre.

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

Wie gesagt, das würden sie so auch nicht tun. Probier's einmal wie oben beschrieben mit nur einer Audiodatei.

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.

Hier solltest Du dazu alles finden (ich hoffe, Du bist der englischen Zunge soweit mächtig😉) - aber, wie gesagt, ich fürchte, das wird so oder so nicht funktionieren, dafür war die Sache einfach nie gedacht...

[Linuchs]

Hallo klawischnigg,

weil Du keinerlei Synchronisiermöglichkeiten hast und Du Dir browser- und verbindungsmäßige Latenzen einhandeln wirst.

Die Spuren synchronisiere ich mit Audacity. Zeitlicher Versatz wird in den musikalischen Pausen ausgeglichen. Voraussetzung ist eine Master-Spur, die beim Aufnehmen der Einzelstimmen per Kopfhörer mitgehört wird.

Ich gebe so schnell nicht auf. Auf einer Chor-Seite (nicht öffentlich) habe ich für ein Lied drei Spuren und für ein anderes Lied ein Video (Dirigent) und ein Audio synchron hinbekommen.

Du hast recht, dass verbindungsmäßige Latenzen entstehen. Aber das habe ich ja geschrieben.

Es funktioniert, wenn ich die drei Spuren starte (gruselig), etwas abwarte, bis die drei Dateien geladen sind und dann nochmal von vorn.

Bei drei Spuren hat der Firefox noch keine hörbaren Latenzen. Mal sehen, wie weit ich ihn kitzeln kann ;-)

Das Video setzt zu früh ein für die Tonspur. Da ich keinen Video-Editor zum Abschneiden habe, setze ich beim Start video.currentTime = 2;. Ob Zehntelsekunden möglich sind, muss ich testen. 2/10 sec Latenz bei derselben Stimme zweimal erzeugt leichten Hall, über 5/10 sec wirds zum Echo.

„The currentTime property sets or returns the current position (in seconds) of the audio/video playback.“

Womöglich kann man im Sekundentakt alle Spuren auf diese Weise synchronisieren. Probieren geht über Diskutieren.

Aber ich bin für jeden Tipp dankbar. Werde doch nicht der Einzige sein, der <audio> mit Javascript steuert?

Linuchs

[Linuchs]

Edit-Zeit leider abgelaufen.

Es funktioniert, wenn ich die drei Spuren starte (gruselig), etwas abwarte, bis die drei Dateien geladen sind und dann beliebig oft von vorn.

Ich möchte nach Klick auf Button n Audio- und/oder Video-Dateien lautlos laden, vermutlich audio.load(), muss dann aber für jede eine Rückmeldung bekommen und richtig zuordnen (wie?). Und wenn alle da sind, audio.play() / video.play()

[Linuchs]

auf der „problematischen“ Seite müssen nach Klick auf den Button [play] die laufenden Sekunden gleichzeitig in allen (beiden) Spuren umspringen.

Wenn das nicht der Fall ist, sind entweder die Spuren nicht zeitgleich gestartet (Versatz, weil geladen wurde) oder der Browser kommt nicht nach, mehrere audio-Tags zeitgleich zu bedienen.

Im zweiten Fall kann ich es z.Z. nicht ändern. Künftig könnte man die Spuren per Checkbox ankreuzen, die geladen werden und klingen.

Im ersten Fall Lautsprecher leise und durchlaufen lassen, dann erneut [play]. Für jemand, der ernsthaft seine Stimme / INstrument lernen möchte, sollte das kein Problem sein.

[klawischnigg]

Hi there,

Die Spuren synchronisiere ich mit Audacity. Zeitlicher Versatz wird in den musikalischen Pausen ausgeglichen. Voraussetzung ist eine Master-Spur, die beim Aufnehmen der Einzelstimmen per Kopfhörer mitgehört wird.

Das hab ich nicht gemeint. Ich meinte, gleichzeitig starten bedeutet nicht Gleichzeitigkeit, wenn Javascript im Spiel ist...;)

Ich gebe so schnell nicht auf. Auf einer Chor-Seite (nicht öffentlich) habe ich für ein Lied drei Spuren und für ein anderes Lied ein Video (Dirigent) und ein Audio synchron hinbekommen.

Auf das kannst Du Dich nicht verlassen. Jeder Browser verhält sich da anderes.

Es funktioniert, wenn ich die drei Spuren starte (gruselig), etwas abwarte, bis die drei Dateien geladen sind und dann nochmal von vorn.

In Deinem Browser.

Das Video setzt zu früh ein für die Tonspur. Da ich keinen Video-Editor zum Abschneiden habe, setze ich beim Start video.currentTime = 2;. Ob Zehntelsekunden möglich sind, muss ich testen. 2/10 sec Latenz bei derselben Stimme zweimal erzeugt leichten Hall, über 5/10 sec wirds zum Echo.

Hängt wieder vom Browser ab. Von den Specs ist currentTime sekundengenau. (BtW, Hall ist das eigentlich nicht, konkret wäre das ein Delay, langes Delay wird zum Echo)

Womöglich kann man im Sekundentakt alle Spuren auf diese Weise synchronisieren. Probieren geht über Diskutieren.

Das stimmt natürlich. Aber, selbst wenn's bei Dir funktioniert, bedeutet das noch nicht notwendigerweise, daß es das auch bei anderen tut.

Aber ich bin für jeden Tipp dankbar. Werde doch nicht der Einzige sein, der <audio> mit Javascript steuert?

Nein, aber Du versuchst möglichweise etwas, wofür das nicht gedacht war...😉

Was Du ja versuchen könntest, anstelle von audio.load() daß Du Deine drei Spuren (ich würd' da mein Glück nicht überreizen😉, wenn's funktionieren sollte) bei Laden der Seite automatisch eine Sekunde bei Lautstärke 0 abspielen läßt. Dann muß der Browser die Dateien schon laden. Hängt aber vermutlich wieder von verschiedenen Umständen ab, was danach passiert. Sollte dann eigentlich genug geladen sein, daß wenigstens alle "Spuren" versuchen, gleichzeitig zu starten, wenn Du bzw. Dein Besucher auf den "Start"-Button klickt.

Also sowas in der Art:

audio1.volume=0;
audio2.volume=0;
audio3.volume=0;

audio1.play();
audio2.play();
audio3.play();

window.setTimeout(function(){audio1.pause();audio2.pause();audio3.pause();},1000);

dann sollte ob beschriebenes Szenario eintreten. Mußt halt auch verhindern, daß in dieser Zeit jemand auf den Start-Button drückt😉...

[Linuchs]

Das stimmt natürlich. Aber, selbst wenn's bei Dir funktioniert, bedeutet das noch nicht notwendigerweise, daß es das auch bei anderen tut.

Du bist doch ein anderer. Nun spiele nicht den Spaßverderber und Bedenkenträger, teste einfach und berichte.

Mußt halt auch verhindern, daß in dieser Zeit jemand auf den Start-Button drückt😉...

Ich habe ein echtes, anderes Problem. Wollte eine dieser neuen Webseiten einer befreundeten Chorleiterin zu Gehör bringen, um mit ihr ein Muster für ihren Chor zu erstellen.

Die betr. Seite war nirgends verlinkt, am Telefon diktierte ich ihr die URL.

Sie war nicht in der Lage, die aufzurufen, weil offenbar jede Eingabe zu Google umgeleitet wurde. Google kannte die Seite nicht, keine Chance, diese aufzurufen.

Ich habe das schon öfter erlebt, dass Google als Startseite des Browsers vorgegeben ist und der Anwender keine URL eingeben kann (oder nicht weiß, wie es geht - und ich seinen Bildschirm nicht sehe).

Also in der Testphase brauche ich pfiffige Leser und Hörer.

[Matthias Apsel]

Hallo Linuchs,

Sie war nicht in der Lage, die aufzurufen, weil offenbar jede Eingabe zu Google umgeleitet wurde. Google kannte die Seite nicht, keine Chance, diese aufzurufen.

Warum sollte das Zensur sein?

Ich habe das schon öfter erlebt, dass Google als Startseite des Browsers vorgegeben ist und der Anwender keine URL eingeben kann (oder nicht weiß, wie es geht

This.

Aber, wo ich dich hier so wiedertreffe: Du warst doch vor einiger Zeit auf der Suche nach Tooltips? Ich bin kürzlich über Tipps.js gestolpert und bin wirklich sehr zufrieden.

Bis demnächst
Matthias

[Der Martin]

Hallo,

Ich habe das schon öfter erlebt, dass Google als Startseite des Browsers vorgegeben ist und der Anwender keine URL eingeben kann (oder nicht weiß, wie es geht - und ich seinen Bildschirm nicht sehe).

nicht nur das - viele Browser sind auch "von Haus aus" so v[e|o]rkonfiguriert, dass sie bei einer Falscheingabe in der URL-Zeile nicht etwa pflichtbewusst eine Fehlermeldung anzeigen (Server nicht gefunden, ungültiges Format o.ä.), sondern stattdessen den eingegebenen Ausdruck an Google oder irgendeine andere Suchmaschine verfüttern.

Kann ich überhaupt nicht leiden. Wenn ich mich vertan habe, will ich nicht, dass die Software kreativ ist und/oder versucht zu raten, was ich wohl gemeint haben könnte, sondern ich möchte klipp und klar sehen: Falsch! Probier's nochmal.

Live long and pros healthy,
 Martin

[klawischnigg]

Hi there,

Das stimmt natürlich. Aber, selbst wenn's bei Dir funktioniert, bedeutet das noch nicht notwendigerweise, daß es das auch bei anderen tut.

Du bist doch ein anderer. Nun spiele nicht den Spaßverderber und Bedenkenträger, teste einfach und berichte.

Ja, werd' ich machen. Aber das mit dem Spaßverderber muß ich zurückweisen. Ich beschäftige mich jetzt schon seit (gefühlter- und auch wohl echterweise) Jahrzehnten mit Audiodarstellung im Browser. Angefangen mit Java-Applets über Flashlösungen (ich hab' damals den Promojingle für den "easyplayer" von Marc Reichelt gemacht) bis zum scheinbar erlösenden <audio>-Element hab ich alles probiert und damit herumge"frickelt". Zum Abspielen von schlichten Audiofiles waren die Lösungen samt und sonders der jeweiligen Zeit entsprechend in Ordnung, aber alles darüber Hinausgehende befand sich schnell auf einer Skala die von "Notlösung" bis "unbrauchbar" reichte.

Der Grund dafür ist auch relativ schnell gefunden - für Musik- und Audioanwendungen brauchst Du Echtzeit-Systeme. Dazu ist aber idR noch nicht einmal das Betriebssystem in der Lage, geschweige denn ein Browser noch Javascript im Speziellen. Auch wenn ich das jetzt bewußt übertrieben dargestellt habe, aber das ist der Grund, warum ich an Deiner Lösung gewisse Zweifel hege. Du möchtest mit Javascript im Browser quasi eine mehrspurige digitale Bandmaschine realisieren, und das ist meiner Meinung und Erfahrung nach nur mit entsprechenden Abstrichen möglich.

Ich habe ein echtes, anderes Problem. Wollte eine dieser neuen Webseiten einer befreundeten Chorleiterin zu Gehör bringen, um mit ihr ein Muster für ihren Chor zu erstellen.

Die betr. Seite war nirgends verlinkt, am Telefon diktierte ich ihr die URL.

Sie war nicht in der Lage, die aufzurufen, weil offenbar jede Eingabe zu Google umgeleitet wurde. Google kannte die Seite nicht, keine Chance, diese aufzurufen.

Wenn manche Browser eine Seite nicht finden, dann versuchen Sie die Angabe in der URL-Zeile bei Google zu finden. Das ist normalerweise dann der Fall, wenn man eine URL am Telefon diktiert und am anderen Ende der Leitung irgendetwas falsch verstanden wurde…😉

[Felix Riesterer]

Lieber Linuchs,

Sie war nicht in der Lage, die aufzurufen, weil offenbar jede Eingabe zu Google umgeleitet wurde.

wenn der eingegebene Text als die tatsächliche URL behandelt werden soll, musst Du das Protokoll voranstellen!

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

Sie war nicht in der Lage, die aufzurufen, weil offenbar jede Eingabe zu Google umgeleitet wurde.

wenn der eingegebene Text als die tatsächliche URL behandelt werden soll, musst Du das Protokoll voranstellen!

Erzähl das mal ihr!

Der gemeine Nutzer weiß nichts von einem Protokoll; Webadressen beginnen mit dem Domainnamen. (Und hören wohl meist auch mit diesem auf.)

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[MudGuard]

Hi,

Der gemeine Nutzer weiß nichts von einem Protokoll; Webadressen beginnen mit dem Domainnamen. (Und hören wohl meist auch mit diesem auf.)

Der gemeine Nutzer weiß nix von einem Domainnamen. Und überhaupt: Webadressen fangen mit www an!!!

;-)

cu,
Andreas a/k/a MudGuard

[Linuchs]

Was Du ja versuchen könntest, anstelle von audio.load() daß Du Deine drei Spuren (ich würd' da mein Glück nicht überreizen😉, wenn's funktionieren sollte) bei Laden der Seite automatisch eine Sekunde bei Lautstärke 0 abspielen läßt. Dann muß der Browser die Dateien schon laden.

Okay, was ich noch nicht verraten habe, ist Schwierigkeitsstufe 2: Es gibt mehrere Lieder mit jeweils mehreren Spuren pro Webseite. Die Lieder, die aktuell eingeübt werden sollen.

Wie ich per Console feststelle, werden nach jedem neuen Aufruf der Seite die benötigten Spuren geladen, in meinem Fall also bei Klick auf [play].

Die Hoffnung auf den Cache-Speicher scheint vergebens.

Alle anderen 30 unnötigen Dateien von je 3 - 5 MB auch zu laden, wäre ja total bekloppt.

[klawischnigg]

Hi there,

Okay, was ich noch nicht verraten habe, ist Schwierigkeitsstufe 2: Es gibt mehrere Lieder mit jeweils mehreren Spuren pro Webseite. Die Lieder, die aktuell eingeübt werden sollen.

Die Hoffnung auf den Cache-Speicher scheint vergebens.

Ja, das kannst Du sinnvollerweise nur dadurch lösen, indem Du das segmentierst - also auf einer Auswahlseite die Links auf die Lieder und für jedes Lied eine eigene Seite...

[JürgenB]

Hallo Linuchs,

mal eine ganz andere Idee:

mit Hilfe des Audio API lädst du die Spuren einzeln, addierst sie gewichtet auf, und gibst sie dann als eine Spur aus.

Gruß
Jürgen

[klawischnigg]

Hi there,

mal eine ganz andere Idee:

mit Hilfe des Audio API lädst du die Spuren einzeln, addierst sie gewichtet auf, und gibst sie dann als eine Spur aus.

Das würde aber bedeuten, daß das Lautstärkeverhältnis der einzelnen Spuren schon vor dem Abspielen festliegt. Ich denke, daß ich nicht das, was er mit "Mischpult" meinte...

[JürgenB]

Hallo,

wenn die "abgemischten" Pakete nicht zu groß sind, z.B. 1s, kann man auch noch beim Abspielen nachmischen.

Aber das ist nur eine Idee. Ob das wirklich funktioniert, ist ein Fall für einen Proof of Concept.

Gruß
Jürgen