Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Audio-Player Übersicht

Symbolbild

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.

Zum Artikel "Das native …"

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

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"

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.