4
Audiostream mit audio-Tag auf Webseite abspielen und mittels Javascript steuern
Hallo,
ich will einen Audiostream, der im Intranet verfügbar ist auf einer Webseite abspielen.
Dafür verwende ich das audio-Tag.
Allerdings will ich nicht das Standardcontrol von dem Tag verwenden und habe mir ein eigenes zusammengestrickt. Dieses funktioniert soweit auch ganz gut.
Nun zum Problem:
Wenn ich den Audiostream pausiere, wird das Audiosignal, das vom Server kommt tatsächlich pausiert. Das heisst, dass wenn ich den Stream auf der Webseite stoppe und nach ca. 5 Minuten wieder abspielen lasse, dass das ausgegebene Signal dann ca. 5 Minuten alt ist.
Bei meiner Anwendung ist es aber wichtig, dass das Signal nicht pausiert, sondern tatsächlich gestoppet wird. Wenn ich nach einer Pause den Stream wieder starte, soll im besten Fall eine komplett neue Verbindung zum Server aufgebaut werden.
Ich habe schon versucht, das audio-Element in der HTML-Datei dynamisch zu erstellen und dieses im Falle einer Pausierung zu löschen, um bei erneutem Abspielen ein komplett neues Element zu erstellen.
Das Erstellen funktioniert dabei ohne Probleme. Allerdings bekomme ich das Element nicht gelöscht.
Hier der JS-Code:
Sieht jemand den Fehler?
Danke
ich will einen Audiostream, der im Intranet verfügbar ist auf einer Webseite abspielen.
Dafür verwende ich das audio-Tag.
Allerdings will ich nicht das Standardcontrol von dem Tag verwenden und habe mir ein eigenes zusammengestrickt. Dieses funktioniert soweit auch ganz gut.
Nun zum Problem:
Wenn ich den Audiostream pausiere, wird das Audiosignal, das vom Server kommt tatsächlich pausiert. Das heisst, dass wenn ich den Stream auf der Webseite stoppe und nach ca. 5 Minuten wieder abspielen lasse, dass das ausgegebene Signal dann ca. 5 Minuten alt ist.
Bei meiner Anwendung ist es aber wichtig, dass das Signal nicht pausiert, sondern tatsächlich gestoppet wird. Wenn ich nach einer Pause den Stream wieder starte, soll im besten Fall eine komplett neue Verbindung zum Server aufgebaut werden.
Ich habe schon versucht, das audio-Element in der HTML-Datei dynamisch zu erstellen und dieses im Falle einer Pausierung zu löschen, um bei erneutem Abspielen ein komplett neues Element zu erstellen.
Das Erstellen funktioniert dabei ohne Probleme. Allerdings bekomme ich das Element nicht gelöscht.
Hier der JS-Code:
function LiveRadio_Create(){
audio_element = document.createElement("audio");
audio_element.id = "liveradio_audio";
audio_element.type = "audio/mpeg";
audio_element.src = liveradio_stream_url;
audio_element.play();
}
function LiveRadio_Delete(){
var audio_node = document.getElementById("liveradio_audio");
if(audio_node.parentNode)
audio_node.parentNode.removeChild(audio_node);
}Sieht jemand den Fehler?
Danke
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 272962
Url: https://administrator.de/contentid/272962
Printed on: April 23, 2024 at 08:04 o'clock
4 Comments
Latest comment
Hallo mabue,
Es gibt auch eine andere Möglichkeit den Stream neu zu starten, und zwar indem du die Wiedergabe pausierst und das src-Attribut des Elements auf einen leeren String setzt. Vor dem erneuten Starten des Streams das src Attribut einfach wieder auf die ursprüngliche URL setzen.
Grüße Uwe
Sieht jemand den Fehler?
du hast das Element zwar dynamisch erstellt, aber vergessen es dem DOM hinzuzufügen:document.body.appendChild(audio_element);Es gibt auch eine andere Möglichkeit den Stream neu zu starten, und zwar indem du die Wiedergabe pausierst und das src-Attribut des Elements auf einen leeren String setzt. Vor dem erneuten Starten des Streams das src Attribut einfach wieder auf die ursprüngliche URL setzen.
Grüße Uwe
Kommt zwar etwas verspätet, aber egal.
Treffer ins Schwarze. So funktioniert ist.
Jetzt habe ich aber eine Latenz von ca. 20 Sekunden. Hab ich da mit dem Audio-Tag Möglichkeiten das zu verringern?
Treffer ins Schwarze. So funktioniert ist.
Jetzt habe ich aber eine Latenz von ca. 20 Sekunden. Hab ich da mit dem Audio-Tag Möglichkeiten das zu verringern?
Zitat von @mabue88:
Jetzt habe ich aber eine Latenz von ca. 20 Sekunden. Hab ich da mit dem Audio-Tag Möglichkeiten das zu verringern?
Nein das ist die Eigenheit des Streamings. Das geht nur mit entsprechenden spezialisierten Anwendungen die wenig Puffer vorhalten und eine je nach Format entsprechend schnelle Anbindung vorhanden sein muss. Das Audio-Tag ist für Live-Streaming eher ungeeignet, da es auch darauf ankommt wie der Browser das TAG umsetzt.Jetzt habe ich aber eine Latenz von ca. 20 Sekunden. Hab ich da mit dem Audio-Tag Möglichkeiten das zu verringern?
Als aktuelle Technologie ist WebRTC in den neuen Browsern ein interessanter Ansatz fürs Real-Time Streaming in Browsern:
Hallo colinardo,
ich habe mich ein wenig zum Thema WebRTC umgesehen...
Entweder übersehe ich etwas, oder ich verstehe da was nicht richtig.
Wie könnte die Implementierung bei mir aussehen, um vom Client aus meinen Audiostream zu empfangen und abzuspielen?
Was wäre dafür beim Server notwendig?
Danke
Gruss
mabue
ich habe mich ein wenig zum Thema WebRTC umgesehen...
Entweder übersehe ich etwas, oder ich verstehe da was nicht richtig.
Wie könnte die Implementierung bei mir aussehen, um vom Client aus meinen Audiostream zu empfangen und abzuspielen?
Was wäre dafür beim Server notwendig?
Danke
Gruss
mabue
