Artikel-Hilfsmenü
Donnerstag, 7. Juli 2016 – aktualisiert am Montag, 20. Dezember 2021
Tools · JavaScript · Audio
Das HTML5 audio-Tag - Stand 2014
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
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?
- Alle aktuellen Browser unterstützen das <audio> Tag. Selbst der IE ab Version 9.
- Lange Zeit musste man mindestens 2 Audioformate (.mp3 und .ogg) parallel anbieten, um die verschiedenen Browser zu bedienen. Der Aufwand für die Formatkonvertierung war erheblich, und dies hat den Einsatz des <audio> Tags in der Vergangenheit z. B. in Blogs sehr behindert.
- Die Bedienung mit der Tastatur ist in allen aktuellen Browsern einschließlich IE und Edge möglich. Traurige Ausnahme: Safari.
- Screen Reader können mit dem <audio> Tag gut bis sehr gut umgehen. Jedenfalls besser als mit den verschiedenen bisher erforderlichen Fallbacks, die auf Flash, JavaScript usw. bauen. Unter Umständen müssen Tasten "durchgereicht" werden, z. B. Pfeiltasten für Vorwärts/Rückwärts oder lauter/leiser.
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 kostenlos
Mit dem Download anerkennen Sie unsere Allgemeinen Geschäftsbedingungen.
Installation:
- Das Archiv audiotest.zip entpacken
- In der Datei audiotest.php unter $url = array und $name = array die eigenen mp3 eintragen
- Die beiden Dateien audiotest.php und audiotest.css auf den Server hochladen
- Die einfachste Art der Einbindung ist vermutlich als iframe. Zum Beispiel:
<iframe src="audiotest.php" width="415" height"500" style="border:none;"></iframe> - Fertig.
Anmerkungen zur Demo:
- Automatischer Durchlauf der Playlist (außer iOS und Android).
- iOS und Android erlauben kein Autostart. Nach der Anwahl eines Titels muss daher in Smartphones und Tablets der Titel explizit gestartet werden. Ebenso funktioniert Preload in iOS (Android?) nicht. Längere Titel werden daher beim ersten Aufruf möglicherweise nicht sofort starten. Hierzu ein guter englischsprachiger Artikel über iOS HTML5 audio limitations.
- Ein einfacher Browser-Sniffer erkennt iPhone und iPad, und liefert diesen Geräten ein aufgehübschtes Design.
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 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.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
31 Kommentare
Keine neuen Kommentare mehr erlaubt.
Marc Haunschild schrieb am Montag, 17.02.14 17:11 Uhr:
Danke für die Zusammenfassung! Werde ich an sofort verwenden.
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.
Fritz schrieb am Freitag, 21.03.14 12:00 Uhr:
@Heiner Schmidt
So etwa wie
audio {width: 100%;}
ins CSS
Heiner Schmidt schrieb am Freitag, 21.03.14 14:30 Uhr:
schon versucht, doch dadurch wird die Anzeige des Standard Players nicht kleiner ;(
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?
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.)
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.
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.
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.
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?
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
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/
Klaus schrieb am Donnerstag, 25.09.14 18:51 Uhr:
Hallo,
danke für den Link!
Gruß, Klaus
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!
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)?
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
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?
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 ;-)
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 ;-)
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.
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
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.
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.
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?
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
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
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.]
Fritz schrieb am Samstag, 24.10.15 13:41 Uhr:
@Hans Henschel
Fortlaufendes Abspielen ist mit diesem Script nicht möglich. :-(
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?
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?
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)