Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Das HTML5 <audio>-Tag - Stand 2014

Vor 5 Jahren wurde das HTML5 <audio> Tag erstmals vom Firefox 3.5 unterstützt. Damals war das zwar spannend, aber in der freien Wildbahn praktisch nicht einsetzbar, bzw. nur mit allerlei Fallback-Lösungen. In diesem Artikel habe ich die damaligen Möglichkeiten und Einschränkungen aufgezeigt.

Wie ist der Stand heute?

Einfache Demo

Der Code:

<audio src="url.mp3" controls ></audio>

Ein einfacher Player

Mit ein wenig PHP lässt sich mit dem <audio> Tag auch ein einfacher, aber gut bedienbarer und barrierefreier Player basteln.

Der Player für Ihre Homepage

Einfach zu installieren, ohne Flash, läuft auch auf iOS und Android. Download Icon Download kostenlos

Installation:

  1. Das Archiv audiotest.zip entpacken
  2. In der Datei audiotest.php unter $url = array und $name = array die eigenen mp3 eintragen
  3. Die beiden Dateien audiotest.php und audiotest.css auf den Server hochladen
  4. Fertig.

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.


Anmerkungen zur Demo:

Nachtrag 06.08.2014

Damit auch Screen Reader Nutzer nicht von der Musik des Players zugedröhnt werden, und trotz laufender Musik noch die Ausgaben des Screen Readers hören, stelle ich grundsätzlich per JavaScript die Lautstärke auf etwa 70 %.

Der Code:

<script> document.getElementById("innerplayer").volume=0.7; </script>

Natürlich muss dem audio-Tag die entsprechende id zugewiesen werden. In meinem Fall: id="innerplayer"

Nachtrag 28.03.2015

Zur Barrierefreiheit des Players:
Mit IE und Firefox kann der Player auch mit der Tastatur bedient werden. Leertaste = Start / Pause; Pfeiltasten rechts / links: 15 Sek. vor-/zurückspulen, Pfeiltasten hoch / runter: lauter / leiser. Mozilla Supportseite

Und hier die Antwort auf die Frage, wie man mehrere Player auf einer Seite so einbinden kann, dass der Start eines Players alle anderen Player pausiert.

Nachtrag 17.06.2015

Webkit-Browser, also Safari, Chrome und Opera, können den Player nicht mit der Tastatur bedienen. Schade! Erst wenn ein Screen Reader aktiv ist, funktioniert es wieder. Der Bug ist bekannt, und wird hoffentlich gefixt.

Nachtrag 25.03.2016

Ich habe das Script wieder einmal dem aktuellen Stand der Technik angepasst.
Konkret: Keine Unterstützung mehr für Dinosaurier wie den IE8.

31 Kommentare

  1. Marc Haunschild schrieb am Montag, 17.02.14 17:11 Uhr:

    Danke für die Zusammenfassung! Werde ich an sofort verwenden.

  2. Heiner Schmidt schrieb am Freitag, 21.03.14 09:25 Uhr:

    Vielen Dank für die hilfreiche Darstellung. Wie kann ich die Größe des Standardplayers verändern? Die Originaldarstellung ist für mein <div> zu breit.

  3. Fritz schrieb am Freitag, 21.03.14 12:00 Uhr:

    @Heiner Schmidt
    So etwa wie
    audio {width: 100%;}
    ins CSS

  4. Heiner Schmidt schrieb am Freitag, 21.03.14 14:30 Uhr:

    schon versucht, doch dadurch wird die Anzeige des Standard Players nicht kleiner ;(

  5. Fritz schrieb am Freitag, 21.03.14 14:38 Uhr:

    @Heiner Schmidt
    jetzt müssten wir vielleicht noch klar stellen, was der "Standard Player" ist.
    Oder kann ich mir das Problem irgendwo anschauen?

  6. Heiner Schmidt schrieb am Samstag, 22.03.14 10:57 Uhr:

    Die Seite ist mit der Änderung noch nicht online. Gemeint ist mit dem Standard Player ist die Grfaik gemeint, die bei Ihnen z.B. in der einfachen Demo angezeigt wird (der Balken mit den Optionen für Play, Lautstärke usw.)

  7. Fritz (Gast) schrieb am Samstag, 22.03.14 13:01 Uhr:

    @Heiner Schmidt
    doch, das sollte schon funktionieren.
    Alternativ:
    audio {width: 100px}

    Je nach Browser wird bei zu kleinen Werten von width der Player aber evtl. gar nicht mehr angezeigt.

  8. Fritz schrieb am Montag, 24.03.14 17:02 Uhr:

    Nachtrag:
    Das CSS für den Player http://webdesign.weisshart.de/audiotest.php hatte einen Fehler, der dazu führte, dass die Bedienelemente im IE nicht angezeigt wurden.
    Sollte jetzt gefixt sein.

  9. Lutz schrieb am Dienstag, 22.07.14 12:47 Uhr:

    Hab das ausprobiert und dabei ein Problem:

    Auf einer HTML seite zum Testen funktioniert es, wenn ich es aber in eienr PHP datei in einen div Container packe funktioniert derselbe code nicht.

  10. Fritz schrieb am Dienstag, 22.07.14 13:02 Uhr:

    @Lutz
    auf dieser (PHP-) Seite hier ist der Player natürlich in einem div Container.
    Und auch auf der Demo-Seite http://webdesign.weisshart.de/audiotest.php

    Was genau packst du denn in ein <div>?
    Hoffentlich nicht einfach die Datei audiotest.php?

  11. Klaus schrieb am Donnerstag, 25.09.14 17:18 Uhr:

    Hallo,
    danke für das Script. Mich würde intressieren ob es möglich ist auch einen Stream-Link einzusetzen. Anstelle von ogg, mp3 etc

    Gruß, Klaus

  12. Fritz schrieb am Donnerstag, 25.09.14 18:17 Uhr:

    @Klaus,

    klar ist das möglich. Einfach den URL des Streams einsetzen.
    Ich hab' mal in den Player
    (http://webdesign.weisshart.de/audiotest.php) den Stream von Bayern 1 eingefügt.
    Ein guter Artikel dazu:
    https://dev.opera.com/articles/html5-audio-radio-player/

  13. Klaus schrieb am Donnerstag, 25.09.14 18:51 Uhr:

    Hallo,
    danke für den Link!

    Gruß, Klaus

  14. Ralf schrieb am Mittwoch, 01.10.14 06:49 Uhr:

    Hallo, das Script ist wirklich Klasse, danke dafür. Nur eines geht nicht gut, hat sich das ganze mal jemand auf einen Andriod Phone oder Tablet angeschaut? Da wird der Audioplayer automatisch verkleinert und ist fast rechteckig, ist normal bei Chrome und Firefox auf Andriod, steht dann halb unterhalb des umschließenden div's. Ich hatte speziell für IE gesucht und bin dann hier fündig geworden, weil der normal audio tag im IE einen riesen Player erzeugt, das ist mit diesem Script nicht mehr der Fall. Nur leider muss ich jetzt sehen das die Darstellung auf Andriod auch normal ausschaut, ich werde es versuchen und dann hier posten, wenn jemand hier natürlich für dieses Problem schon eine Lösung hat, nehme ich natürlich gerne! Danke schon mal!

  15. Fritz schrieb am Mittwoch, 01.10.14 17:31 Uhr:

    @Ralf
    Das geschilderte Verhalten unter Android kann ich leider nicht nachvollziehen.
    Vielleicht magst du mir Details nennen - gerne per E-Mail:
    Mit welchem Player hast du das Problem? Mit der einfachen Demo hier auf dieser Seite, oder mit dem Player
    Welche Android-Version?
    Welches Gerät (Smartphone/Tablet)?

  16. Crun schrieb am Freitag, 10.10.14 22:14 Uhr:

    Hallo ich komme nicht zurecht. Wie baut man den Player zusammen? Ich kriege das nicht hin. Ich habe mich bisher ein bisschen mit html beschäftigt. Hier habe ich es gleich mit Java und php zu tun.

    Könnt ihr mir Tips geben wo ich mich belesen kann?

    Vielen Dank

  17. Eduard schrieb am Mittwoch, 14.01.15 12:19 Uhr:

    Hallo, ich möchte gerne den Stream eines Radio Senders auf einer Webseite einbinden. Fritz schrieb, einfach die URL einbinden, aber das funktioniert bei mir nicht.
    Das ist der Stream link: http://radiofh.t-n-media.de:10990
    Alternativ könnte ich auch eine m3u einbinden. Auch das funktioniert (bei mir) nicht.
    Kann mir jemand helfen?

  18. Fritz schrieb am Montag, 26.01.15 13:58 Uhr:

    @Eduard,
    das sollte funktionieren, wenn (und nur wenn) hinter dem URL auch tatsächlich ein .mp3-Stream steckt.
    Ja, ich weiß, die Suche nach der korrekten Adresse eines .mp3-Streams ist manchmal etwas tricky ;-)

  19. Hermann schrieb am Donnerstag, 12.02.15 13:47 Uhr:

    Vielen Dank, ein guter Player.
    Musste nur etwas im CSS anpassen, damit sich gleiche css styles
    wie: <li> nicht behindern.
    Nochmals Danke ;-)

  20. Michael schrieb am Sonntag, 22.02.15 17:22 Uhr:

    @Eduard: Shoutcast zickt leider herum. Es funktioniert, wenn die URL mit /; endet, in Deinem Beispiel http://radiofh.t-n-media.de:10990/;

    Funktioniert aber auch nur auf dem Desktop-PC, auf dem Smartphone (Lumia 625) erscheint weiter die Fehlermeldung "Invalid Source", da müsste noch nachgebessert werden.

  21. Emre schrieb am Mittwoch, 04.03.15 22:18 Uhr:

    hi leute ich hab mal ne frage wie binde ich eintrack von meinen rechner in den player ein

  22. Hermann schrieb am Freitag, 27.03.15 20:13 Uhr:

    Was muss ich machen, damit immer nur EIN Player läuft bei mehreren Playern auf einer Seite ? Der Klick auf den nächsten Player schaltet den laufenden automatisch aus.

  23. Fritz schrieb am Freitag, 27.03.15 21:11 Uhr:

    @Hermann

    Eine Möglichkeit ist der Einsatz des Demo-Players.. Also eine Playlist mit mehreren Titeln in einem Player.

    Falls es aber unbedingt mehrere Player sein müssen, dann wird das wohl nur mit Javascript möglich sein:
    http://www.w3schools.com/tags/av_met_play.asp

    Hier ein Mini-Tutorial, wie dies z. B. mit jQuery aussehen kann.

  24. Markus schrieb am Samstag, 22.08.15 12:42 Uhr:

    Hallo,
    ich habe den audioplayer auf meiner homepage erfolgreich zum laufen gebracht, aber jetzt noch folgendes problem:

    Bei IE oder Safari (problemlos, funktioniert einwandfrei), bei Opera und Google Chrome laufen ständig alle mp3´s durcheinander und lassen sich nicht steuern. Kann mir jemand helfen?

  25. Fritz schrieb am Samstag, 22.08.15 12:51 Uhr:

    @Markus,
    dein Problem kann ich leider nicht nachvollziehen.
    Kann es sein, dass du mehrere Browser gleichzeitig geöffnet hast, und der Player im Hintergrund in einem anderen Browser läuft?
    Hast du einigermaßen aktuelle Versionen der jeweiligen Browser?
    Hast du mal den Cache der diversen Browser gelöscht?

    PS: Ich schau mir das gerne mal auf deiner HP an, wenn du mir die Adresse verrätst. An webdesign@weisshart.de

  26. Mike schrieb am Donnerstag, 27.08.15 12:15 Uhr:

    Vielen herzlichen Dank Herr Weisshart für diese Infos!!!
    Hat mir sehr sehr geholfen! Ich hatte zuerst einen externen Player ("dewplayer") in meinen Shop integriert, der gut funktionierte, aber eben auf allen Smartphones nicht mehr...
    Bis ich durch Zufall hierher gelandet bin!

    Da sieht man mal wieder, wie WERTVOLL Informationen sind und dass es Personen gibt, wie Sie Herr Weisshart, der diese Infos zusammenschreibt und zur Verfügung stellt!

    Vielen Dank nochmals und ein Lob auf diese Website!
    VG Micha B.

    Antwort @ Micha B.:
    Vielen Dank für das Lob.
    Werbung für kommerzielle Seiten möchte ich allerdings gerne bezahlt haben. Also bei Interesse bitte Kontakt an webdesign@weisshart.de

  27. Hans Henschel schrieb am Samstag, 24.10.15 13:37 Uhr:

    Habe den Code erfolgreich einbauen können! Danke (und Spende wird folgen). Aber wie erzeugt man eine fortlaufende Abspielung?
    [Bin scripting-Neuling.]

  28. Fritz schrieb am Samstag, 24.10.15 13:41 Uhr:

    @Hans Henschel
    Fortlaufendes Abspielen ist mit diesem Script nicht möglich. :-(

  29. Konstantin schrieb am Mittwoch, 25.11.15 12:01 Uhr:

    hallo, auf meiner webseite nutze ich momentan einen mp3 player von soundcloud. mein problem ist, dass dieser player nur mit windows funktioniert das heisst auf ios wird nichts angezeigt.

    bin kein programmierer und all das was ihr schreibt ist für mich fachchinesisch - ich verstehe kein wort.

    wäre ganz nett wenn jemand ein videotutorial heraus bringt für dummies.

    so weit bin ich momentan gekommen: habe diesen code: <script>
    document.getElementById("innerplayer").volume=0.6;
    </script>
    in meine website als widget/html kopiert; auf der homepage sieht man den player.

    ich habe auch per ftp auf meinen server ein paar mp3 songs hochgeladen.

    jetzt stehe ich mit folgenden fragen:
    1. wie verlinke ich die mp3 songs mit dem player?
    2. wozu habe ich audiotest.zip heruntergeladen? ich habe es entzippt und weiß nichts damit anzufangen?

    http://www.konstantin-music.de/demosongs/


  30. Martin schrieb am Donnerstag, 26.11.15 13:50 Uhr:

    Eine Frage zur Breite des audio-tags: Du hast bei "Einfache Demo" einen simplen audio-Tag eingebaut, wenn ich das richtig verstehe. Wenn ich mir das am iPhone 4 ansehe, dann sehe ich nur einen grauen Balken mit einem Pfeil auf der linken Seite. Soweit alles in Ordnung :-) Jetzt hab ich das auf einer Seite eines Bekannten gesehen, und da ist dieser audio-Tag in einem DIV eingebaut, das nur ca. 2/3 der Fensterbreite haben soll ... der audio-Tag passt sich aber nicht an diese Breite an sondern wandert über das Design hinaus. Hast du da irgendeine Idee?

  31. Fritz schrieb am Donnerstag, 26.11.15 14:44 Uhr:

    @Martin & @all
    Die Kommentarfunktion hier ist leider für Support zu sperrig.
    Daher gibt es ab sofort Support im Forum (Kategorie: Support für den HTML5 Player)


Keine neuen Kommentare mehr erlaubt.