Radio Stream Player - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

Radio Stream Player

Scripte > Multimedia
Simpler StreamPlayer für Radio Streams
Der einfachste Streaming Player für Radio Stream. Er ist sehr einfach aufgebaut und beliebig über den HTML-Code erweiterbar.
Die gesamte Ansicht des Players ist über die CSS-Datei einstellbar. Im Verweis .Obj122_pagination { padding-bottom: 100px; } müssen je nach Textblockgröße der Abstand zwischen den Blöcken eingestellt werden. Die jeweiligen Logos sollten auch gemäß Vorlage
Teil-Transparent als .png im Ordner img hinterlegt werden.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>...</head> und HTML-Code in den BODY-Bereich <body>...</body> der aufrufenden Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann auch durch einen Doppelklick ausgeführt werden.
Download Button
x runter geladen

Radio Bayern 1

... und mit beliebig Text.

Antenne Niedersachsen

... und mit beliebig Text.

Radio FFN

... und mit beliebig Text.

Radio NDR 2

... und mit beliebig Text.

Radio Energie

... und mit beliebig Text.

Radio RBB Fritz

... und mit beliebig Text.

Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj122_0/streamplayer.css" />
<!-- Hinweis:
Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<script src="wsX5Obj/Obj122_0/streamplayer.js"></script>
Code für den <BODY> Bereich
<div align="center">
<div class="Obj122_container">
<div class="Obj122_pagination" onclick="play(1)">
<input type="image" src="wsX5Obj/Obj122_0/img/logo_bayern1.png" width="120" height="55" alt="Stream: Radio Bayern 1">
<h3>Radio Bayern 1</h3>
<audio style="display:none" id="1" src="https://dispatcher.rndfnk.com/br/br1/schwaben/mp3/mid"  preload="none" >
</audio>
<p> ... und mit beliebig Text.
</div>
<div class="Obj122_pagination" onclick="play(2)">
<input type="image" src="wsX5Obj/Obj122_0/img/logo_antenne.png" width="120" height="55" alt="Stream: Antenne NS">
<h3>Antenne Niedersachsen</h3>
<audio style="display:none" id="2" src="https://stream.antenne.com/reg03/mp3-192/Web/ "  preload="none" >
</audio>
<p> ... und mit beliebig Text.
</div>
<div class="Obj122_pagination" onclick="play(3)">
<input type="image" src="wsX5Obj/Obj122_0/img/logo_ffn.png" width="120" height="55" alt="Stream: Radio FFN">
<h3>Radio FFN</h3>
<audio style="display:none" id="3" src="http://player.ffn.de/radioffn.mp3"  preload="none" >
</audio>
<p> ... und mit beliebig Text.
</div>
<div class="Obj122_pagination" onclick="play(4)">
<input type="image" src="wsX5Obj/Obj122_0/img/logo_ndr2.png" width="120" height="55" alt="Stream: Radio NDR 2">
<h3>Radio NDR 2</h3>
<audio style="display:none" id="4" src="http://icecast.ndr.de/ndr/ndr2/hamburg/mp3/128/stream.mp3"  preload="none" >
</audio>
<p> ... und mit beliebig Text.
</div>
<div class="Obj122_pagination" onclick="play(5)">
<input type="image" src="wsX5Obj/Obj122_0/img/logo_energie.png" width="120" height="55" alt="Stream: Radio Energie">
<h3>Radio Energie</h3>
<audio style="display:none" id="5" src="http://edge09.streamonkey.net/energy-digital/stream/mp3"  preload="none" >
</audio>
<p> ... und mit beliebig Text.
</div>
<div class="Obj122_pagination" onclick="play(6)">
<input type="image" src="wsX5Obj/Obj122_0/img/logo_rbbfritz.png" width="120" height="55" alt="Stream: RBB Fritz">
<h3>Radio RBB Fritz</h3>
<audio style="display:none" id="6" src="https://dispatcher.rndfnk.com/rbb/fritz/live/mp3/mid"  preload="none" >
</audio>
<p> ... und mit beliebig Text.
</div>
</div>
</div>
Code Datei "streamplayer.css"
.Obj122_container {
width: 800px; /* Breite des Players */
margin: 0 !important;
background: transparent;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.Obj122_container div { margin: 4px; }
.Obj122_container input {
padding: 0;
margin: 0;
border-radius: 0;
border: 1px solid #AAA;
top: -100px;
background: #FAFAFAFA;
}
.Obj122_container input:hover {
border: 1px solid transparent;
background: radial-gradient(#F8FBCD, #D8C839) !important;
}
.Obj122_container input:focus {
border: 1px solid #000;
background-color: #EEE !important;
}
.Obj122_container div,.Obj122_container input  {
width: 200px;  /* wenn entfernt gilt 'width' im HTML-Code */
height: 100px; /* wenn entfernt gilt 'height' im HTML-Code */
max-width: 44vw;
max-height: 22vw;
display: block !important;
}
/* für <p> Textpassage */
.Obj122_pagination { padding-bottom: 100px; }                   
@media (max-width: 800px) and (orientation: landscape) {
.Obj122_container input:hover { filter: invert(.2) }
}
@media(hover: none) and (pointer: coarse) {
.Obj122_container input:hover {
border: 1px solid transparent;
background: #AAA !important;
}
}
@media (prefers-color-scheme: dark) {
.Obj122_container div { background: #000; }
.Obj122_container button { background: #555 !important; }
}
Code Datei "streamplayer.js"
jQuery(document).ready(function( $ ) {
$("audio").on("play", function (me) {
$("audio").each(function (i,e) {
if (e !== me.currentTarget) {
this.pause();
this.currentTime = 0;
}
});
});
})
function play(e) {
var de = document.getElementById(e);
var div = document.getElementsByClassName('Obj122_container')[0];
// alle Buttons löschen
var number = div.getElementsByTagName('input').length;
for (var i = 0, n = number; i < n; i++){
div.getElementsByTagName('input')[i].style.background="none";
}
if (de.paused) {
// Cachen eines streams vermeiden: (nur, wenn die JavaScript Funktionalität verwendet wird
url = de.src.split("?")[0];
var de1 = url  + "?" + new Date().getTime();
document.getElementById(e).src = de1;
// aktiven Sender mit einem Button kennzeichnen - Randabstand / Imagegröße: 3px 3px / 30px
div.getElementsByTagName('input')[e-1].style.background="url('wsX5Obj/Obj122_0/img/display_play.png') no-repeat 3px 3px / 30px";
de.play();
de.style.display="block";
de.onended = function () {
if (document.getElementById(e+1)) {
play(e+1);
} else {
play(1);
}
}
} else {
de.pause();
}
}

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt