Artikel-Hilfsmenü
Donnerstag, 29. September 2016 – aktualisiert am Samstag, 27. Januar 2024
Der HTML5 Audio-Player für Radio-Streams
Caching des Streams
Eine Eigenart des HTML5 Audio-Players ist es, dass Streams gecached werden. Nach einer Pause und Neustart wird der Stream an der Stelle fortgesetzt, an der er pausiert wurde. Das ist grundsätzlich in Ordnung. Z.B. für Podcasts. In speziellen Fällen kann dieses Verhalten aber unerwünscht sein, z. B bei Radio-Streams. Man wünscht sich, dass der Stream an der aktuellen Stelle wieder aufgenommen wird.
Für diesen Fall muss das JavaScript erweitert werden.
Eine Demo mit mehreren Streams - ohne Caching.
Radio Bayern 1
BAYERN 1 - Die beste Musik für Bayern.
BAYERN 1, das reichweitenstärkste Programm des Bayerischen Rundfunks
BAYERN 1 bietet internationale Oldies und melodischen Pop vor allem aus den 70ern und 80ern....
NDR 2
NDR 2 ist ein deutscher Musikradiosender der Gruppe Norddeutscher Rundfunk. NDR 2 ist das einzige Hörfunkprogramm des NDR, das Werbung ausstrahlt. Wellenchef ist Torsten Engel. NDR 2 startete am 1. Januar 1956 und ging aus dem Hörfunksender NWDR Nord hervor, der am 30. April 1950 seinen Sendebetrieb aufnahm. Am 2. Januar 1981 wurde der erste Werbespot auf NDR 2 ausgestrahlt, da bisher Werbung nicht erlaubt war. Das Motto von NDR 2 lautet "Der Sound der 80er und die beste Musik von heute. NDR 2 - Alle aktuellen Hits". Die abendlichen Musikprogramme widmen sich der Live-Musik, der Musikgeschichte, der deutschen Musikszene, aktueller Musik, Rock, Soul und Easy. Darüber hinaus wird auch eine Reihe vorgeschlagen.
Features
- Kann nahtlos ans Design jeder Seite angepasst werden.
- Keinerlei Plugin auf Seiten des Users erforderlich.
- Kein Flash erforderlich.
- Funktioniert auf allen Geräten, vom Smartphone bis zum Desktop oder TV.
- Start / Stop durch Anklicken / Antippen des Schmuckbildes (oder des Textes).
Das HTML
<div class="playlist_container">
<div class = "song" onclick="play(1)">
<input type="image" src="image1.png" width="120" height="55" alt="Stream: Radio Bayern 1">
<h3>Radio Bayern 1</h3>
<audio style="display:none" id ="1" src="http://pfad_zum_stream_1" preload="none" >
</audio>
<p> Das Ganze funktioniert natürlich auch mit einem Stream.
</div>
<div class = "song" onclick="play(2)">
<input type="image" src="image2.png" width="120" height="55" alt="Stream: NDR 2">
<h3>NDR 2</h3>
<audio style="display:none" id ="2" src="http://pfad_zum_stream_2" preload="none" >
</audio>
<p> ... und mit beliebig vielen Streams.
</div>
</div>
Das JavaScript
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<script>
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('playlist_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, und nicht, wenn die nativen audio-controls benutzt werden)
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/button_12.png') no-repeat 2px 2px / 12px";
de.play();
de.style.display="block";
de.onended = function (){
if (document.getElementById(e+1)) {
play(e+1);
} else {
play(1);
}
}
} else {
de.pause();
}
}
</script>
Hinweis: jQuery ist erforderlich für die Funktion "nicht mehrere Player gleichzeitig abspielen". Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht natürlich die erste Zeile des obigen Codes nicht mehr.
CSS Beispiel
Hier nur ein wenig grundsätzliches CSS. Weitere CSS Anweisungen sind natürlich möglich, und können erforderlich sein, um den Player nahtlos an jedes Design anzupassen.
<style>
.song {clear:left; margin:1 0;}
.song input {margin: 0 1em .5em 0;float:left;padding:0;}
.song p {margin:0 0 1.5em 0;}
.song:after {
content : ".";
display : block;
height : 0;
clear : left;
visibility : hidden;
}
audio{ margin:0;min-width:0}
@media only screen and (min-device-width:768px) {
audio{max-width:75%;}
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
audio{max-width:10em;}
}
</style>
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
11 Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
helmut schrieb am Dienstag, 19.03.19 19:46 Uhr:
coole anleitung, leiter erscheint bei mir das control panel nicht. woran könnte das liegen?
Fritz schrieb am Dienstag, 19.03.19 22:00 Uhr:
Vielleicht liegt es einfach daran, dass es gar kein control panel gibt?
Sven schrieb am Mittwoch, 15.05.19 07:24 Uhr:
Und weil es angeblich kein Control Panel gibt, steht im HTML Bereich auch "controls" im Audio Tag *augenroll
CHIP schrieb am Freitag, 23.08.19 02:25 Uhr:
Sehr geehrter Herr Weisshart, vielen Dank für dieses tolle Skript.
Habe festgestellt das bei wiederkehren mehrerer eingebundenen Radio Channels diese nicht mehr live abspielen, vorausgesetzt ich klicke zweimal drauf
Gibt es eine Möglichkeit dieses Skript etwas zu optimieren? Besten Dank im Voraus.
Fritz schrieb am Freitag, 23.08.19 10:30 Uhr:
@CHIP
Der URL von NDR2 war hier in der Demo falsch. Danke für den Hinweis. Ist korrigiert.
Aber "vorausgesetzt ich klicke zweimal drauf"? Beim zweiten Klick stoppt das Audio. Das ist kein Bug, sondern so beabsichtigt.
Sollte ich aber die Frage ganz falsch verstanden haben: Bitte im Support-Forum https://forum.weisshart.de/
CHIP schrieb am Freitag, 23.08.19 13:42 Uhr:
Bitte wechseln sie in verschiedenen Zeitabständen mehrmals zwischen diesen beiden Radios hin und her (Beispiel oben). Der erste klick ist immer live, soweit klar -> komme ich später auf diesen zurück spielt er dort weiter wo er aufgehört hat (geht in Pause Stellung und spielt dort weiter wo er aufgehört hat) erst beim nochmaligen klicken auf den gleichen Channel spielt dieser dann live :-)
Meine frage, gibt es eine Möglichkeit das diese beim klick immer live abspielen?
PS: Danke für Angebot ihres Forums, scheint mir etwas zu komplex (verwirrt) zu sein :-)
Fritz schrieb am Freitag, 23.08.19 16:28 Uhr:
@CHIP
das Forum verwirrt?
Na ja. Dort kann man, wie hier, Fragen stellen.
Der Vorteil dort: Die Benachrichtigungsfunktion bei Antworten.
Aber gut: Ich denke, ich konnte es "optimieren".
CHIP schrieb am Samstag, 24.08.19 01:26 Uhr:
Sehr geehrter Herr Weisshart, es funktioniert bei mehreren Channels genau 'zehnmal' , ab dem elften und alle danach kommenden starten diese erst nach exakt 15 Sekunden.
Dieser Fehler ist auf Google(Engine) unter Android auch unter Windows unter Chrom/Opera zu beobachten.
Keine Probleme unter Apple->Safari/Chrom/Opera/Firefox etc. -> auch keine Probleme unter Window mit Firefox/Edge, läuft hervorragend!!!!
Vielen Dank für Ihre schnelle Bearbeitung :-)
sehr empfehlenswert!
Chip schrieb am Mittwoch, 01.01.20 15:31 Uhr:
Sehr geehrter Herr Weisshart, gäbe es eine Möglichkeit daß beim klick auf das Sender-Logo optisch eine Hintergrundgrafik aufleuchtet (transparent)
Besten Dank
„Frohe Feiertage und guten Rutsch ins neue Jahr!“
Fritz schrieb am Mittwoch, 01.01.20 15:43 Uhr:
@Chip
Ja, diese Möglichkeit gäbe es. Aber mehr als ein "ja" ist in der Kommentarfunktion wie gesagt leider nicht möglich.
Tappi schrieb am Mittwoch, 03.08.22 23:02 Uhr:
Ich finde das großartig aber bin ehrlich, ich habe keine Ahnung wie ich das einbinden kann.
Nur der html Code funktioniert nicht, wie bekomme ich das alles komplett integriert, so das es auch funktioniert?
Wenn es geht ohne iframe