In meinem letzten HTML5 Tutorial habe ich euch erklärt, wie ihr den neuen Video Tag verwendet. Da HTML5 allerdings nicht nur einen Tag für Videos zur Verfügung stellt, sondern auch ein Audio Element (z.B. für Musik), möchte ich dieses entsprechend in diesem Tutorial erklären.
Wie auch beim Video Tag sind natürlich auch hier beim Audio Tag keine Flash oder sonstige Plugins von nöten. Der Audio Tag wird von allen modernen Browsern unterstützt, es gibt drei Standard Formate, allerdings wird nicht jedes Format von jedem Browser unterstützt. Das bedeutet um alle Browser abzudecken müssen mindestens zwei Formate eingebunden werden, dass selbe Spiel wie auch beim Video Tag.
Folgende Desktop-Browser unterstützen das Audio Element:
Internet Explorer ab Version 9.0
Mozilla Firefox ab Version3.5
Opera ab Version 10.5
Google Chrome ab Version 3.0
Apple Safari ab Version 3.0
Dabei werden folgende Audio Formate von den jeweiligen Browsern unterstützt:
Format
IE 9
Firefox 3.5
Opera 10.5
Chrome 3.0
Safari 3.0
Ogg Vorbis
Nein
Ja
Ja
Ja
Nein
MP3
Ja
Nein
Nein
Ja
Ja
Wav
Nein
Ja
Ja
Ja
Ja
Wie bereits erwähnt, ist an der Liste deutlich zu erkennen, dass es nicht möglich ist mit einem Audio Format alle Browser zu supporten. Als erstes Beispiel möchte ich euch trotzdem die einfach Variante des Audio Tags mit nur einem Audio Format zeigen:
Das ist die einfachste Variante des Audio-Tags ohne Fallback und mit eingeblendeten Player-Kontrollelementen. Natürlich ist es sinnvoll einen entsprechenden Alternativ, bzw. Warntext hinzuzufügen:
Ihr Browser unterstützt leider keinen HTML5 Audio Tag
lied.wav
Um nun also eine Kompatibilität zu allen Browsern zu gewährleisten benötigen wir mindestens zwei Audio Formate. Statt dem src Attribut in Audio Tag werden zwei weitere (oder mehr) Source Tags innerhalb des Audio Tags eingebunden.
Der Browser wird das erste kompatible Element abspielen:
Ihr Browser unterstützt leider keinen HTML5 Audio Tag
lied.mp3
Neben den bereits gezeigten Attributen unterstützt der Audio Tag noch drei weitere. Hier eine vollständige Liste mit entsprechender Beschreibung:
Attribut
Wert
Beschreibung
autoplay
autoplay
Wenn gesetzt, startet die Audio-Datei bei Seitenaufruf
controls
controls
Wenn gesetzt, werden die Bedienelemente eingebunden
loop
loop
Wenn gesetzt, wiederholt sich die Audio-Datei immer wieder
preload
preload
Wenn gesetzt, wird die Audio-Datei bei Seitenaufruf vorgeladen
src
Pfad
Pfad zur Audio-Datei
Mit diesen Beschreibungen solltet ihr den Audio Tag ohne Probleme verwenden können.
