HTML / CSS

HTML5 Audio Tag verwenden – Tutorial

WordPress Entwickler und Webdesigner

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

Anzeige:




Dabei werden folgende Audio Formate von den jeweiligen Browsern unterstützt:

FormatIE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
Ogg VorbisNeinJaJaJaNein
MP3JaNeinNeinJaJa
WavNeinJaJaJaJa

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.

Bootstrap 4 Kurs

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:

AttributWertBeschreibung
autoplayautoplayWenn gesetzt, startet die Audio-Datei bei Seitenaufruf
controlscontrolsWenn gesetzt, werden die Bedienelemente eingebunden
looploopWenn gesetzt, wiederholt sich die Audio-Datei immer wieder
preloadpreloadWenn gesetzt, wird die Audio-Datei bei Seitenaufruf vorgeladen
srcPfadPfad 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: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

7 Antworten zu “HTML5 Audio Tag verwenden – Tutorial”

  1. 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

  2. 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

Kommentar verfassen

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.