HTML5 Audio-Player aufgehübscht - Probleme mit Stream (Support für Audio-Player)

Saar-Franzose, Tuesday, 06.10.2020, 14:52 (vor 1297 Tagen)

Hallo, erstmal ein großes Lob an den Programmierer.

Leider habe ich ein Problem mit einem speziellen Stream-Link, der einfach nicht funtionieren möchte.
Hier der Link: http://media.autorouteinfo.fr:8000/direct_nord.mp3

Sollte es evtl. an der Funktio "Cachen eines Streams vermeiden" im JS-Script liegen?

Ich habe schon einiges probiert, komme aber nicht mehr weiter.

Kann mir jemand helfen?

Grüße
Frank

Eintrag gesperrt
3358 Views

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Saar-Franzose, Tuesday, 06.10.2020, 15:55 (vor 1297 Tagen) @ Fritz

Vielen Dank für die schnelle Rückmeldung.

Habe mal kurz in den neuen Link reingehört. Das ist die aktuelle Verkehrslage, aber nicht der eigentliche Radiosender. Das muss ich dann mal beobachten.

Aber wie gesagt, vor Wochen bereits unter Windows getestet (ohne Fehler 403), der Radiosender wurde abgespielt. Mit dem Script leider nicht. Deshalb meine Vermutung, dass es vllt. am Cachen liegt.

Grüße
Frank

Eintrag gesperrt
3356 Views
Avatar

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Fritz ⌂, Tuesday, 06.10.2020, 15:59 (vor 1297 Tagen) @ Saar-Franzose

Nein, ein Fehler 403 hat nichts mit Cache zu tun. Er wird direkt von Server erzeugt.

Eintrag gesperrt
3296 Views

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Saar-Franzose, Tuesday, 06.10.2020, 16:05 (vor 1297 Tagen) @ Fritz

Ok, ich glaube die ändern aktuell die Stream-Adressen. Selbst auf der Seite "https://voyage.aprr.fr/autoroute-info" funktionert der Stream nicht.

Werde beobachten, testen und berichten.

Trotzdem vielen Dank.

Eintrag gesperrt
3284 Views

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Saar-Franzose, Wednesday, 07.10.2020, 15:51 (vor 1296 Tagen) @ Saar-Franzose

Hallo,
noch eine Frage.

Wenn ich das Cachen einschliessen möchte und das Einblenden eines Buttons bei aktivem Sender unterbinden möchte, muss ich doch einfach nur im Scriptbereich die nachfolgenden Zeilen löschen:

// Cachen eines Streams vermeiden
url = de.src.split("?")[0];
var de1 = url + "?" + new Date().getTime();
document.getElementById(e).src = de1;

// aktiven Sender mit einem Button kennzeichnen
div.getElementsByTagName('input')
[e-1].style.background="url('/images/play_button.png')
no-repeat 2px 2px / 16px";

Grüße
Frank

Eintrag gesperrt
3290 Views
Avatar

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Fritz ⌂, Wednesday, 07.10.2020, 16:45 (vor 1296 Tagen) @ Saar-Franzose

Wenn ich das Cachen einschliessen möchte

Tut mir leid, ich verstehe nicht, warum du das tun willst.
Wenn du einen HTML5-Player verwendest, dann wird der Stream standardmäßig vom Browser gecached. Nach einer Hörpause wirst du also das hören, was vor einigen Minuten gesendet wurde.
Das ist generell bei einem Livestream unerwünscht. Um das zu vermeiden, gibt es JavaScript-Lösungen wie z.B. https://webdesign.weisshart.de/audio_tag_mult_demo.php

… und das Einblenden eines Buttons bei aktivem Sender unterbinden möchte, muss ich doch einfach nur im Scriptbereich die nachfolgenden Zeilen löschen:

// aktiven Sender mit einem Button kennzeichnen
div.getElementsByTagName('input')
[e-1].style.background="url('/images/play_button.png')
no-repeat 2px 2px / 16px";

Nein. Wenn du das willst, dann lösche die Zeile

de.style.display="block";

Deine Wünsche kannst du aber viel einfacher realisieren.

<audio src="url.mp3" controls ></audio>


Das ist alles. Kein CSS, kein JavaScript, nur einfach obige Zeile.

Eintrag gesperrt
3276 Views

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Saar-Franzose, Thursday, 08.10.2020, 16:27 (vor 1295 Tagen) @ Fritz

Danke für die Info.

Jetzt aber nochmals zum eigentlichen Problem.

Die Internetseite und auch die Stream-Adressen wurden durch den Anbieter aktualisiert. Jedoch spielt das Skript auch den neuen Stream "https://media.autorouteinfo.fr/direct_nord.mp3" nicht ab.

Öffne ich den Stream einfach durch Eingabe der Adresse in Firefox, wird dieser problemlos abgespielt.

Woran kann es liegen?

Grüße
Frank

Eintrag gesperrt
3275 Views
Avatar

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Fritz ⌂, Friday, 09.10.2020, 11:00 (vor 1294 Tagen) @ Saar-Franzose

https://media.autorouteinfo.fr/direct_nord.mp3

Öffne ich den Stream einfach durch Eingabe der Adresse in Firefox, wird dieser problemlos abgespielt.

In Wirklichkeit läuft dort ein Video.
Quelltext:

<video controls="" autoplay="" name="media">
<source src="https://media.autorouteinfo.fr/direct_nord.mp3" type="audio/mpeg">
</video>


Man sieht das auch, wenn man die Adresse aufruft. Dann öffnet sich zuerst ein Videoplayer, und lädt dann ein Audio nach.

Eintrag gesperrt
3266 Views

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Saar-Franzose, Friday, 09.10.2020, 12:04 (vor 1294 Tagen) @ Fritz
bearbeitet von Saar-Franzose, Friday, 09.10.2020, 12:12

Hallo,
vielen Dank für die schnelle Rückmeldung.

Ich habe den Link von der neuen Seite:
https://voyage.aprr.fr/autoroute-info

Dort habe ich im Quelltext nichts von "<video>" gefunden.

Wenn ich nun ihr Skript dahingehend abändere und in diesem Fall "<audio>" durch "<video>" ersetze, wird der Stream abgespielt. :-D

Sieht letztendlich nicht so toll aus, da der Video-Button mehr Platz benötigt, aber man kann nicht alles haben.

Grüße
Frank

Nachtrag: Wenn ich das Sender-Logo bzw. den Sendernamen anklicke ("onclick"), wird mir angezeigt, dass kein geeignetes Videoformat bereitgestellt wird. Dadurch wird auch der mp3-Stream nicht abgespielt. :-(

Eintrag gesperrt
3312 Views

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Saar-Franzose, Friday, 09.10.2020, 12:51 (vor 1294 Tagen) @ Saar-Franzose

Hallo,

habe aus Neugier mal den "Player mit Playlist auf Basis des nativen audio-Tags" ausprobiert.

Bei diesem Player wird erstaunlicherweise der mp3-Stream korrekt wiedergegeben.

Grüße
Frank

Eintrag gesperrt
3234 Views
Avatar

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Fritz ⌂, Friday, 09.10.2020, 14:01 (vor 1294 Tagen) @ Saar-Franzose

"Player mit Playlist auf Basis des nativen audio-Tags"
Bei diesem Player wird erstaunlicherweise der mp3-Stream korrekt wiedergegeben.

Dafür gibt es eine Erklärung. Bei diesem Player wird das Audio beim Wechsel des Senders nicht einfach gestoppt und mit neuem Inhalt gestartet, sondern es wird das ganze <audio>-Element ausgetauscht.

Eintrag gesperrt
3270 Views

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Saar-Franzose, Sunday, 11.10.2020, 16:33 (vor 1292 Tagen) @ Fritz

Hallo,

habe bei dem aufgehübschten Player den Abschnitt für das NICHT-Cachen der Streams entfernt.

// Cachen eines Streams vermeiden
//url = de.src.split("?")[0];
//var del = url + "?" + new Date().getTime();
//document.getElementById(e).src = del;

Jetzt wird der mp3-Stream abgespielt.

Kann derjenige der den Stream bereitstellt ein Cachen verlangen?

Wie bereits erwähnt, habe ich im Quelltext von "https://voyage.aprr.fr/autoroute-info" keinen <video> Eintrag gefunden.

Grüße
Frank

Eintrag gesperrt
3208 Views
Avatar

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Fritz ⌂, Sunday, 11.10.2020, 19:00 (vor 1292 Tagen) @ Saar-Franzose

Jetzt wird der mp3-Stream abgespielt.

Ja, das kann ich nachvollziehen. Allerdings mit den oben beschriebenen Folgen bzgl. Cache.

Kann derjenige der den Stream bereitstellt ein Cachen verlangen?

Das macht der Browser automatisch. Und um das zu vermeiden gibt es ja solche Scripte wie
https://webdesign.weisshart.de/audio_tag_mult_demo.php

Wie bereits erwähnt, habe ich im Quelltext von "https://voyage.aprr.fr/autoroute-info" keinen <video> Eintrag gefunden.

Gibt es dort auch nicht. Sondern, wie schon erwähnt in
https://media.autorouteinfo.fr/direct_nord.mp3
Sourcecode-Snippet von dieser Seite:

<video controls="" autoplay="" name="media">
   <source src="https://media.autorouteinfo.fr/direct_nord.mp3" type="audio/mpeg"
</video>

Nachtrag 13.10.:
Zufällig entdeckt: Diesen "Unfug" macht neuerdings (auch) Shoutcast

Eintrag gesperrt
3206 Views

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Saar-Franzose, Tuesday, 13.10.2020, 10:25 (vor 1290 Tagen) @ Fritz

Hallo Herr Weisshart,

vielen Dank für Ihre Geduld. Ich werde diesen Stream auf einer gesonderten Seite abspielen lassen (ohne Script).

Noch eine Frage bezüglich der Lautstärkeanpassung.

Muss ich für jeden Stream - der mit einer eigenen ID versehen ist - den Code "document.getElementById("radio01").volume=0.7;" einzeln eingeben, z. B.
<script>
document.getElementById("radio01").volume=0.7;
document.getElementById("radio02").volume=0.7;
document.getElementById("radio03").volume=0.7;
</script>

Oder ist es möglich mit einer Variablen ("radio[e]") zu arbeiten. Habe es probiert, aber leider nicht hinbekommen.

Grüße
Frank

Eintrag gesperrt
3236 Views
Avatar

HTML5 Audio-Player aufgehübscht - Probleme mit Stream

Fritz ⌂, Tuesday, 13.10.2020, 13:42 (vor 1290 Tagen) @ Saar-Franzose

Muss ich für jeden Stream - der mit einer eigenen ID versehen ist - den Code "document.getElementById("radio01").volume=0.7;" einzeln eingeben

Grundsätzlich ja.

Oder ist es möglich mit einer Variablen ("radio[e]") zu arbeiten.

Hier sind verschiedene Lösungsmöglichkeiten aufgezeigt:
https://stackoverflow.com/questions/4275071/getelementbyid-wildcard