Suche durch eine gestreamte MP3-Datei mit HTML5 <audio> tag

Question

Hoffentlich kann mir jemand damit helfen.

Ich spiele mit einem node.js Server, der Audio an einen Client streamt, und ich möchte einen HTML5-Player erstellen. Im Moment streame ich den Code von Knoten mit Chunked Encoding, und wenn Sie direkt auf die URL gehen, funktioniert es großartig.

Was Ich mag würde zu tun ist einbetten dies den HTML5 <audio>-Tag, etwa so:

<audio src="http://server/stream?file=123"> 

wo /stream der Endpunkt für den Knoten Server ist die MP3 zu streamen. Der HTML5-Player wird in Safari und Chrome geladen, aber ich kann nicht suchen, und Safari sagt sogar, dass es sich um eine "Live-Übertragung" handelt. In den Kopfzeilen von /stream schließe ich die Dateigröße und den Dateityp ein, und die Antwort wird ordnungsgemäß beendet.

Irgendwelche Gedanken darüber, wie ich das umgehen könnte? Ich könnte natürlich einfach die ganze Datei auf einmal senden, aber dann würde der Spieler warten, bis das Ganze heruntergeladen ist - ich würde es lieber streamen.

Answer 1

siehe hier http://www.scottandrew.com/pub/html5audioplayer/, habe ich dies verwendet und es spielt, während es die Datei herunterlädt. Es wartet ein wenig auf den Puffer, spielt dann aber ab. Ich habe noch nie versucht zu suchen, aber ich würde damit beginnen, die "aud.currentTime" in seinem Code zu setzen, wenn das möglich ist.

Viel Glück

Answer 2

senden Sie eine Accept-Ranges (RFC 2616, Section 14.5) Response-Header?

Answer 3

Von dem, was ich verstehe, Sie wollen, dass die Spieler, damit der Benutzer auf Teile des Audio/Video, dass haven‘springen Ich bin noch nicht sicher, ob das möglich ist, da ich mir einige Beispiele für html5-mediale Elemente angeschaut habe und sie mir einfach nicht erlauben, danach zu suchen ungepufferte Teile :(

Wenn Sie durch den gepufferten Teil suchen wollen - dann ist es kein Problem. In der Tat - du bist hier ein Problem für mich zu schaffen, soweit ich es verstehe. Sie möchten die Datei streamen und was dies bewirkt, lässt den Spieler denken, dass Sie eine Art Live-Stream haben. Wenn Sie die Datei direkt gesendet haben, haben Sie dieses Problem nicht, da der Player die Wiedergabe starten kann, bevor die gesamte Datei geladen wurde. Das funktioniert gut mit Audio- und Videoelementen, und ich habe dieses Verhalten sowohl in Chrome und FF bestätigt :)

Hoffe, das hilft!

Answer 4

vielleicht wird diese html5 audio player example uns das neue Element und seine .load, .play, .currentTime usw. Methoden erklären und demonstrieren.

Ich benutze ein Array von Elementen und natürlich die currentTime-Position. Wir können auch Eventhandler (z. B. 'loadeddata') verwenden, um zu warten, bevor erlaubt zu suchen.

ping und Spaß haben mit html5 :)

Answer 5

Stellen Sie sicher, der Server-Bereichsanforderungen akzeptiert, können Sie überprüfen, um zu sehen, ob Accept-Ranges im Header ist. Im jPlayer ist dies ein häufiges Problem in Webkit (insbesondere Chrome) Browsern, wenn es um Fortschritt und Suchfunktionen geht.

Möglicherweise verwenden Sie den jPlayer nicht, aber die Server Response Informationen auf der offiziellen Website können nützlich sein.

http://www.jplayer.org/latest/developer-guide/#jPlayer-server-response

Answer 6

aber ich hatte das gleiche Problem. Es ist notwendig, einige Header für die Antwort der Mediendatei zu setzen.

als Beispiel:

Accept-Ranges:bytes 
Content-Length:7437847 
Content-Range:bytes 0-7437846/7437847 

Dann Audio-Tag wird