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:
<audio src="lied.wav" controls="controls"> </audio> |
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:
<audio src="lied.wav" controls="controls"> Ihr Browser unterstützt leider keinen HTML5 Audio Tag </audio> |
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:
<audio controls="controls"> <source src="lied.mp3" type="audio/mpeg" /> <source src="lied.ogg" type="audio/ogg" /> Ihr Browser unterstützt leider keinen HTML5 Audio Tag </audio> |
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.
Ich wünsche euch viel Spaß beim ausprobieren.
Quellen: Wikipedia, W3Schools
Schlagworte zu diesem Artikel: Apple, Audio, Browser, Google, HTML5
Danke für die Übersicht. Ein Ajax Tutorial für nen Player auf ner Seite wäre mal nett. Da gibt es nur wenige Lösungen im Netz, aber bestimmt viel Interesse.
Hi!
Danke für das Tutorial. Sieht auf den ersten Blick ja recht einfach aus. Ich hätte absolutes Interesse daren, dass die Datei nicht zum download erreichbar ist (wie bei Flash-Playern). Ist dies bei dieser Lösung hier möglich?
Gruß Jens
Nein, die Datei kann immer heruntergeladen werden.
Danke. Heißt „immer“ auch z.B. beim emff-Player?
http://emff.sourceforge.net/
Auf den ersten Klick zumindest ist das ja dort nicht möglich.
Nein, bei Flash wird es nicht im Quellcode angezeigt.
Hallo, ich versuch mich gerade in einer Webseite und werde nicht fündig, ich würde gern einen Song auf der Startseite einsetzen ohne controller ,Button ect und beim verlassen der Startseite soll der Song dann auch enden. Gibt es da Hilfe. MfG Günter
Hallo Günter,
versuch doch einmal folgenden Generator:
html5css3box.com/audio-tag-generator/