Hinweis gesucht: Streamlink weitergabe in Audio Element

end0fseven · 23. August 2018

Guten Tag allerseits

Ich habe vor ein paar Jahren ein kleines Programm in C# geschrieben.
Das ganze wollte ich jetzt Universell im Browser machen mit HTML/CSS.

Das Grundgerüst steht (Provisorisch) und kann unter Hier angeschaut werden.

Mein Problem aktuell, ich weiss nicht weiter. (Bin leider auch nicht der grosse Programmierer)

Das Ziel, jeder Button soll einen MP3 Stream Link enthalten. Bei Klick auf das jeweilige Sender-Logo soll der Player (Audio Element) anspringen.
Ich weiss leider nicht, wie ich das weiterführen soll, mir fehlt einfach das passende Key-Word um weiter zu fahren.

Ggf. könnte ich ja mit der "ID" der Buttons weiterfahren?

Habt ihr mir einen Tipp?

Code der Main-Seite:

HTML:

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebRadioFM</title>
    <link rel="stylesheet" href="css/main.css" type="text/css"/>
  </head>
  <body>
   <audio controls>
  <source src="http://aac.radiobern1.ch/radiobern164k" type="audio/mp3">
Dein Browser kann leider diesen Player nicht wiedergeben..
</audio>
<table>
<tbody>
<tr>
<td><button id="radiobern1"><img src="/images/bern1.png" alt="RadioBern1"/></button></td>
<td><button id="bigfm"><img src="/images/big_fm.png" alt="BIGFM"/></button></td>
<td><button id="srf3"><img src="/images/srf3.png" alt="SRF3"/></button></td>
</tr>
<tr>
<td><button id="virgin"><img src="/images/virgin.png" alt="VirginRadio"/></button></td>
<td><button id="pure"><img src="/images/pure.png" alt="Pure"/></button></td>
<td><button id="energylatino"><img src="/images/energy_latino.png" alt="EnergyLatino"/></button></td>
</tr>
<tr>
<td><button id="rautehouse"><img src="/images/raute_house.png" alt="RauteHouse"/></button></td>
<td><button id="swr3"><img src="/images/swr3.png" alt="SWR3"/></button></td>
<td><button id="1live"><img src="/images/1live.png" alt="1Live"/></button></td>
</tr>
</tbody>
</table>

  </body>
   <footer>
  <p>WebRadioFM by SplitUP.ch</p>
  <p>Kontakt: <a href="mailto:info@splitup.ch">
  info@splitup.ch</a></p>
</footer>
</html>

Code der CSS Seite:

Code:

body {
    height:400px;
    width:299px;
    background-image: url("../images/radio_background.jpg");
    background-color:#1C1C1C;
    background-repeat:no-repeat;
}
  
footer {
    width:93%;
    background:rgba(160,160,160,0.7);
}
}

Edit: Das ganze wird nur für mich und ein paar Leute sein. Da uns die ganzen Android Apps mit Werbung nerven.

majusss · 24. August 2018

https://webdesign.weisshart.de/audio_tag_mult_demo_stream.php

Hier mal angucken.

ryan_blackdrago · 24. August 2018

Alternativ:
je eine .htm/.html pro Sender, welche jeweils die Anker auf die anderen htm.-Dateien der Webradios enthalten.

Angenommen man hat (wie in der ZIP-Datei enthalten 3 Webradios (1. Frankreich, 2. Österreich, 3. Deutschland).

Die index.htm startet das Webradio von F, mit Ankerpunkt auf AT (2.htm) und D (3.htm).
Wird AT (2.htm) gewählt, so steht F (index.htm) und D (3.htm) zur Verfügung usw.

Kommt so komplett ohne Javascript aus.
Nur eben der Audio-Tag aus HMTL5 wird benötigt.

Schnipp · 10. Januar 2019

Danke für die Tipps!

end0fseven · 10. Januar 2019

Mittlerweile haben wir eine Lösung gefunden.

Ein weiteres Problem war, das man keine Sender wechseln konnte, ohne das alles doppelt zu hören war.

Wir haben das ganze jetzt in Javascript gemacht.

Das ganze darf gerne angeschaut und genutzt werden unter: https://webradiofm.splitup.ch/

Vielen Dank für die Tipps.
Auf wunsch kann ich gerne einen einblick geben

Suche

Hinweis gesucht: Streamlink weitergabe in Audio Element

end0fseven

Lt. Commander

Anhänge

majusss

Rear Admiral

ryan_blackdrago

Captain

Anhänge

Schnipp

Lt. Commander

end0fseven

Lt. Commander

Ähnliche Themen