Artikel-Hilfsmenü
Donnerstag, 2. November 2017 – aktualisiert am Samstag, 14. Oktober 2023
Audio-Player Übersicht
Im Laufe der Jahre habe ich zahlreiche Audio-Player vorgestellt. Vor Jahren waren das noch Player von Drittanbietern, oft kostenpflichtig, häufig auf Basis von Flash, zumeist auch mehr oder weniger JavaScript-lastig. Seit unter HTML5 das audio-Tag verfügbar ist, habe ich mich auch selbst mit der Optimierung und "Verschönerung" des nativen HTML5-Audio-Players beschäftigt.
Im Folgenden stelle ich alle "meine" Audio-Player in kompakter Form vor. Alle selbst entwickelten Player sind kostenlos, selbstverständlich barrierefrei, und funktionieren auch auf Touchscreens (iOS und Android).
Wenn du einen Player für deine Homepage suchst, dann empfiehlt es sich, die folgenden Varianten der Reihe nach zu studieren. Die Reihenfolge steht auch für zunehmende Schwierigkeit bei der Installation. Es muss also nicht immer gleich der wdwjs-Player sein.
Das native audio-Tag
In vielen Fällen genügt das native HTML5 audio-Tag, um ein Audio auf einer Webseite zu präsentieren. Dazu ist nur eine einzige Zeile HTML, und keinerlei PHP, JavaScript oder CSS erforderlich. Das klappt dann sogar auf Seiten, die mit Homepage-Baukästen wie Jimdo & Co. erstellt wurden.
Audio bei Tabwechsel pausieren
Kein Player, sondern eine vielleicht nützliche Erweiterung. Schont Ressourcen, und vor allem Nerven.
Mehrere audio-Tags auf einer Seite
Nichts spricht dagegen, mehrere audio-Tags auf einer Seite einzubauen. Das einzige Problem dabei: Wenn der Besucher mehrere Audios startet, dann klingt das unter Umständen "eigenartig". Mit etwas JavaScript lässt sich dieses Problem lösen.
Zum Artikel "Mehrere …" – mit Codebeispielen
Mehrere audio-Tags auf einer Seite – aufgehübscht
Die Technik "Mehrere audio-Tags auf einer Seite" lässt sich mit etwas CSS auch zu einem wirklich schönen Design aufmotzen.
Zum Artikel "… aufgehübscht" – mit Codebeispielen
Der HTML5 Audio-Player für Radio-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.
Der HTML5 Audio-Player für Radio-Streams – Design 2
Der gleiche Player, mit einem gänzlich anderen Design ausgestattet.
Zum Artikel "… Radio-Streams 2"
Ein Player mit Playlist auf Basis des nativen audio-Tags
Wenn's ein Player mit einer automatisch durchlaufenden Playlist sein soll.
Zum Artikel "… mit Playlist" – mit kostenlosem Download
Der wdwjs-Player
Ein Player, dessen Playlist mit Bildern und erklärenden Texten beliebig erweitert werden kann. Der Download der Titel wird, soweit technisch möglich, unterbunden.
Dieser Player erfordert zur Installation brauchbare PHP-Kenntnisse. Daher gibt es das Script nur nach Anfrage per E-Mail.
Zum Artikel "Der wdwjs-Player"
Sonderfall: Zwei MP3-Audios vergleichen
Die Aufgabenstellung:
Zwei Versionen eines Audios - Original und bearbeitet – durch Hin- und Herschalten zwischen den Versionen vergleichen.
Zum Artikel "Zwei mp3-Audios vergleichen"
Audio-Player mit Auto-Playlist
Ein Audio-Player für alle mp3-Files in einem Ordner. Das kann hilfreich sein, wenn man auf den Inhalt des Ordners nicht unmittelbar Einfluss hat. Im Beispiel: Alle von Usern im Chat hochgeladenen Audios.
Zum Artikel "Audio-Player mit Auto-Playlist"
Der Able-Player
Keine eigene Entwicklung. Dennoch gehört dieser barrierefreie Player, entwickelt von Terrill Thompson, der Vollständigkeit halber in diese Sammlung.
Zum Artikel "der bisher beste barrierefreie Audio-Player"
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
5 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.
test schrieb am Donnerstag, 15.04.21 14:37 Uhr:
<script>alert("Hackingangriff!")</script>@test
Netter Versuch, aber hier nicht :-D
Gottfried schrieb am Montag, 28.11.22 13:16 Uhr:
Hallo Herr Weisshart!
Vielen Dank für das tolle Skript!!
Auf https://almenrausch.de/jugendorchester konnte ich es gut gebrauchen und (in leicht modifizierter Form) einsetzen.
Schade nur, dass die GEMA-Vorschriften keine längere Vortragszeit im Web erlauben :-(
Gerold schrieb am Montag, 05.12.22 11:07 Uhr:
Hallo Herr Weisshart!
kann das Skript auch auf php 8.1 umgestellt werden?
Danke für ihre Rückmeldung und schönen Tag noch
@Gerold
wenn du jetzt noch verrätst, auf welchen der vielen hier vorgestellten Player sich deine Frage bezieht, dann kann ich dir gerne antworten (dass alle Player auch unter PHP 8.1 laufen) ;-)
Falls du dennoch Probleme hast, dann helfe ich gerne - im Forum https://forum.weisshart.de/
Gerold schrieb am Donnerstag, 29.12.22 14:23 Uhr:
Hallo Herr Weisshart
habe erst heute deien Rückmeldung gesehen.
Es geht um den "Audio-Player auf HTML5 Basis"
LG
Gerold
Gerold schrieb am Donnerstag, 29.12.22 15:16 Uhr:
Hallo,
nun konnte ich das selber lösen indem ich die Zeile mit direktlink deaktiviert habe
/*$direktlink .= '<li><a style="color:#000" href="'.$url[$i-1].'"> '.$name[$i-1].'</a></li>';*/
LG und vielen Dank für den Player
Gerold