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.

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

<!-- Hinweis:

Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<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>

Nach dem <BODY> Tag

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 «