Radio StreamPlayer
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
<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öschenvar 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 wirdurl = 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 / 30pxdiv.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();
}
}
Feedbacks zu ""
Es gibt noch keine Rezension.
Vielen Dank für Dein Feedback.