HTML5 Audio hat falsche Länge

[Kokujou]

Hallo ihr Lieben!

Ich hatte schon öfter mähnliche Beiträge... es scheint so etwas wie Media-Funktionalität in einen Browser zu bringen ist auf dem selben Level wie Atomphysik...

Mein Problem: Inzwischen habe ich dank euch sehr erfolgreich einen Backend-Controller geschrieben der mir Audio-Files streamt die mit ffmpeg ins MP3-Format gestreamt werden und zwar mit folgenden Argumenten:

ffmpeg -i \"{audioPath}\" -q:a 2 -vn -f ogg -

nun das Problem. Denn nun wird die Länge des Audio-Files aus irgendeinem Grund komplett falsch angezeigt. manchmal 22 Minuten, je nachdem wie heftig ich herumspiele sogar mal ein paar tausend Minuten.

Kennt vielleicht irgendjemand den ffmpeg befehl mit dem ich die Audios so an Browser übermitteln kann dass sie möglichst auf allen (inklusive mobilen) browsern mit korrekter Länge wiedergegeben werden können?

 

[Bagbag]

AAC sollte jeder Browser beherschen.
Mit dem Encoder vom Fraunhofer-Institut: -c:a libfdk_aac -b:a 128k -f m4a.

Alternativ könntest du noch einen anderen Container für Vorbis versuchen: -f webm.

Und anstatt (Ogg-)Vorbis (standard mit -f ogg) würde ich eher den Nachfolger Opus nutzen (-c:a libopus), hier ebenfalls mit ogg oder webm als Container.

 

[Chief Gewickelt]

Hast du daran gedacht die Metadaten der Datei vorzuladen?

<audio preload="metadata">

Generell habe ich im Kopf dass Ogg-Vorbis im Audio-Element immer Probleme bereitet hat was die angezeigte Laufzeit angeht; dem Tip von Bagbag einfach mal CBR AAC zu verwenden solltest du auf jeden Fall einmal nachgehen.

 

[Kokujou]

okay lieber nochmal von ganz vorne und ohne unnötigen Schnickschnack. ich hab jetzt alles ausprobiert und das Grundproblem schien wirklich mp3 zu sein...

jetzt geht es eigentlich nur noch um die optimierung. laut dieser Tabelle unterstützen zumindest alle Browser MP3 und MP4 (seit wann ist MP4 eigentlich ein audio-format? )
https://en.wikipedia.org/wiki/HTML5_audio
auch möglich wäre AAC, denn wer braucht schon internet explorer.

OGG müsste man dann wohl mit safari im mobilen modus testen, denn übermobile Browser steht da nichts, ich hoffe also dass safari da mitzieht
FLAC käme noch in Frage... ich kenne mich mit audio aber so gar nicht aus und will einfach nur dass die grundlegendste aller Funktionalitäten irgendwie zum laufen gebracht wird^^

da ich eine Echtzeit-Encodierung mit FFMPEG mache ist es auch wichtig dass die Enkodier-Zeit möglichst gering gehalten wird, die Quell-Audios sind dabei übrigens in allen möglichen Varianten von standards wie MP3 über M4A bis OGG ... könnten sogar WAV dabei sein.

außerdem ein weiteres Problem: DIeses "preload" scheint nicht so wirklich zu funktioniern. erst wenn ich wirklich auf play drücke lädt er die Duration, vorher ist alles nur NaN und Infinity, vermutlich weil es eben streaming ist, gibt's da ne lösung für?

 

[Bagbag]

mp4 ist ein Container, der kann Video und Audio enthalten. Lässt du das Video weg, ist eben nur Audio drin. Da wird dann auch gerne m4a genutzt, um das deutlich zu machen (ist aber der identische Inhalt).

FLAC ist halt vergleichsweise groß, das solltest du - zumindest bei der Verwendung über Mobilfunk - im Hinterkopf behalten.

Audiokodierung ist schnell, da brauchst du dir bei keinem Codec gedanken drum machen. Da ffmpeg praktisch alle unterstützt, kannst du das Eingangsformat auch ignorieren.

 

[Kokujou]

okay also -f m4a und -f mp4 funktionieren beide schonmal nicht....
-c:a libfdk_aac -b:a 128k -f m4a funktioniert übrigens auch nicht...

 

[Bagbag]

Du darfst ruhig auch die Fehlermeldungen nennen...

m4a geht wirklich nicht, das kennt ffmpeg nicht als Alias. Bei "simplem" mp4 ist das Problem, dass es nicht einfach in eine Pipe geschrieben werden kann. Hier musst du noch Flags setzen, dass das geht: ffmpeg -i file.mp3 -c:a aac -b:a 128k -f mp4 -movflags frag_keyframe+empty_moov -.

Und ob libfdk_aac vorhanden ist, hängt vom Kompilat ab. aac ist aber immer vorhanden, daher habe ich das in dem Befehl mal genutzt.

 

[Kokujou]

Du darfst ruhig auch die Fehlermeldungen nennen...

m4a geht wirklich nicht, das kennt ffmpeg nicht als Alias. Bei "simplem" mp4 ist das Problem, dass es nicht einfach in eine Pipe geschrieben werden kann. Hier musst du noch Flags setzen, dass das geht: ffmpeg -i file.mp3 -c:a aac -b:a 128k -f mp4 -movflags frag_keyframe+empty_moov -.

Und ob libfdk_aac vorhanden ist, hängt vom Kompilat ab. aac ist aber immer vorhanden, daher habe ich das in dem Befehl mal genutzt.

sorry aber ich krieg nur sehr umständlich fehlermeldungen, da wir ja hier vom konvertieren in einen stream reden und nicht von einem powershell befehl. ich probier es ja manchmal über powershell aus aber mein powershell ist auch irgendwie im eimer, da ist der cursor dauernd um x stellen versetzt, was das eingeben nicht viel einfacher macht.

bei deinem ersten befehl sagte er z.b. dass der codec vom frauenhofer nicht gefunden wurde. und dass m4a als ausgabeformat nicht unterstützt wird

Ergänzung (2. Juni 2021)

mp4 nimmt ffmpeg so wie du geschrieben hast an, allerdings ist firefox mit dem code bei 50 minuten >.<

 

[Bagbag]

Kannst du mir die Datei, mit der du testest mal zukommen lassen? Bei meinen Tests zeigt Firefox das richtige an.

 

[Kokujou]

ich teste mit mindestens 5 verschiedenen Dateien... ehrlich gesagt hab ich langsam das gefühl dass firefox mir böse Cache-Streiche fehlt. ich bin gerade wieder bei libopus -f ogg gelandet. die ersten 2 lieder die ich zuerst abspiele sind plötzlich wieder bei 50min, alle die neu laden scheinen richtig zu sein... dabei hab ich den network tab mit disable cache offen >.<

 

[Bagbag]

Privater Tab, Container (das Addon kann ich dir dazu auch empfehlen: Temporary Containers), anderer Browser

 

[Kokujou]

okay... also ich würde sagen ich bleibe bei libopus, das ist bis jetzt das problemfreieste format und scheint alle input-formate zu unterstützen...

das einzige nervige ist, dass der Browser dieses "preload" irgendwie nicht so ernst nimmt. Die Duration wird immer erst geladen wenn ich play drückte... kann ich da irgendwas machen? möglichst ohne die Duration im Backend zu berechnen weil um das zu tun müsste man vermutlich wieder irgendeine Bibliothek laden, denn das geht ja über normale FileInfo hinaus.

 

[Bagbag]

Das Input-Format spielt keine Rolle, ffmpeg konvertiert das ja.

Ein kleiner Hack, der mir spontan einfällt: await element.play().then(() => element.pause()), direkt nach dem Laden der Seite ausführen.

Die Duration könntest du mit ffmpeg auslesen.

 

[Kokujou]

okay ich würde sagen das fasst es dann zusammen... ich würd es natürlich gerne auch mobil testen, aber meine website ist mal wieder auf mobil zusammengebrochen... und auf mobil ne Fehlermeldung zu kriegen ist ja auch ne Quantenwissenschaft >.< alles was ich kriege ist ne blanke weiße seite und der inspektor zeigt absolut nix an... herrlich ^^

aber das ist eine andere Geschichte, ich würde sagen das Thema kann damit geshclossen werden,

nochmal als Resume: Ich entscheide mich für -a:c libopus -f ogg
media type ist dann folgerichtig audio/ogg

 

[Bagbag]

Was ist mit webm? Hast du das probiert?

 

[Kokujou]

laut wikipedia ist webm gar nicht mit safari kompatibel... und da nehm ich lieber den container mit dem safari theoretisch umgehen kann, um dann zu hoffen dass mein iPhone es irgendwann mal abspielen können wird^^

 

[netzgestaltung]

Mobil lässt sich per USB+ADB+Firefox remote gut debuggen, auch der Chrome:
https://www.sitepoint.com/debugging-mobile-websites-firefox/
https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Chrome_Desktop

 

[Kokujou]

Mobil lässt sich per USB+ADB+Firefox remote gut debuggen, auch der Chrome:
https://www.sitepoint.com/debugging-mobile-websites-firefox/
https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Chrome_Desktop

ja... nur dass ich ja leider Apple habe :'( curse you apple!
ich weiß, auch dafür gibt es tools aber das dämliche ist, meine Seite hat einen dermaßen komischen Fehler dass alles was ich angezeigt bekomme eine weiße seite ist ohne jede Fehlermeldung oder sonstewas, es ist einfach pures Nichts.

Selbst wenn ich dafü rhier einen Thread eröffnen würde wüsste ich nichtmal wo ich anfangen soll meinen Code zu beschreiben. ich kann ja schlecht mein ganzes Git Repo hier verlinken und sagen "hier, sucht mal schön"

 

[Bagbag]

Hier könnte dir ein ErrorHandler helfen.

 

[Kokujou]

da wir das thema jetzt schonmal anschneiden, weiß jemand wie man cache per javascript deaktivieren kann?
während der entwicklung ändern sich files ständig. in firefox kann man wenigstens shift + reload machen. aber mobil geht das natürlich nicht. jemand ne idee?