Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Der HTML5 audio-Player für 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. 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

Das Ganze funktioniert natürlich auch mit einem Stream.

NDR 2

… und mit beliebig vielen Streams.

Features

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" controls 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" controls 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); if (de.paused) { de.play(); de.onended = function() { if (document.getElementById(e+1)) { play(e+1); } else { play(1); } } } else { // 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; 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>

Creative Commons Lizenzvertrag CC BY-NC-SA 3.0 DE

Wenn das Script für Sie nützlich ist, können Sie die weitere Entwicklung mit einer Spende in beliebiger Höhe hier unterstützen.

Creative Commons Lizenzvertrag
Artikeltext (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE

Ihr Kommentar zu diesem Artikel:

Über Ihren Kommentar zu diesem Artikel freue ich mich. Ich behalte mir jedoch vor, Spam kommentarlos zu entfernen.