Musik mit HTML5 in die Website einbinden über <audio>

Über HTML5 ist es sehr einfach geworden, Audios in die eigene Website einzubinden. Dazu gibt es den neuen HTML5 Befehl <audio>. Die Browser der üblichen Hersteller unterstützen diesen Befehl seit den Browserversionen:

Google Chrome seit 4.0 / IE seit Version 9.0 / Firefox seit Version 3.5 / Safari seit Version 4.0

Beispieldatei zum Testen

Folgender Ausschnitt wurde von Künstler Mike Coustic aus seinem Album „Memories“ auch zum Download zu Schulungszwecken zur Verfügung gestellt:
https://www.html-seminar.de/downloads/musikausschnitt-mike-coustic-memories.mp3
Vielen Dank an Ihn (unbedingt den Musiker bei Konzerten oder Online besuchen).

Grundsätzlich Aufbau

Der grundsätzliche Aufbau ist:

<audio>
</audio>

Attribute für Play-, Pausebutton und Lautstärkeregler

Unser HTML-Befehl <audio> kann (und sollte) noch mit Standardbedienelementen versehen werden, damit der Websitebesucher auch die entsprechende Kontrolle hat (und es vor allem die Audiowiedergabe pausieren kann, bevor es nervt). Der Play- und Pause-Button und der Lautstärkeregler werden dann über das Attribut "controls" automatisch im Browser angezeigt. Manchmal sieht man bei der Angabe für dieses Attribut auch die längere Form "controls="controls"" - funktioniert, ist aber länger.

<audio controls>
</audio>

Da es ein "neuer" HTML5 Befehl ist, gibt es natürlich sehr alte Browser, die diesen Befehl nicht verstehen. Daher können wir eine Textinformation für diese veralteten Browser mitgeben. Dieser Text wird innerhalb von unserem <audio>-Befehl integriert:

<audio controls>
Sorry - Ihr Browser hat keine Unterstützung für dieses Audio-Format.
</audio>

Attribut "autoplay"

Weitere Attribute bei Audio ist "autoplay". Es wird dadurch sofort nach dem Laden der Website die Wiedergabe der Sound-Datei gestartet. Das kann nett sein, aber oft genug nervt das den Besucher! Wenn mehrere Tabs im Browser geöffnet sind, wird es verwirrend, wenn aus einem der "Tabs" Musik gespielt wird und man gerade eine komplett andere Seite ansieht.

Daher also das Attribut "autoplay" mit Bedacht nutzen.

Attribut "loop"

Mit diesem Attribut wird das endlose Abspielen und Wiederholen der Audio-Datei aktiviert. Da bestehen gute Chancen, den Besucher früher oder später damit zu nerven!

Attribut "preload"

Bei mobilen Geräten von Apple wird die Angabe von preload ignoriert um Übertragungsvolumen zu sparen. Hier ist die Voreinstellung immer preload=none - egal was im HTML-Code angegeben ist. Grundsätzlich kann man den Browser zum Vorladen über preload=auto überreden. Gibt es allerdings mehrere Sounddateien auf der Website, macht das wenig Sinn.

Musikdatei angeben - Attribut "src"

Bisher haben wir die eigentliche Musikdatei noch nicht integriert. Dies geschieht innerhalb unseres <audio>-Befehls. Dazu wird der HTML5-Befehl <source> genutzt. Dieser hat Attribute wie die Dateiquelle "src" und das Attribut "type".

Die Dateiquelle src="musik.mp3" gibt an, wie die Datei benannt wurde. Dieses kann natürlich auch zwecks Übersicht in einem eigenen Verzeichnis sein. Dann muss zusätzlich das Verzeichnis angegeben werden, das in einem Unterverzeichnis von unserer aufrufenden HTML-Datei liegt. Liegen alle Musikdateien im Verzeichnis "sound", dann sieht unser Attribut wie folgt aus: src="sound/musik.mp3".

Zusätzlich benötigen wir die Art der Musikdatei! Wenn wir das Dateiformat MP3 verwenden, muss als Typ type="audio/mpeg" angegeben werden.

Unser bisheriger HTML-Code:

<audio controls>
  <source src="musik.mp3" type="audio/mpeg">
Sorry - Ihr Browser hat keine Unterstützung für dieses Audio-Format.
</audio>

Natürlich fragt man sich, warum zum Teufel benötigen wir dieses Attribut "type". Und hier liegt der Hund begraben. Es gibt wegen Lizenzgeschichten verschiedene Dateiformate, die je nach Browser und Browserversion unterstützt wurden oder auch nicht.

Folgende 3 Musikformate sind für den HTML5-Befehl <audio> verfügbar:

  • .mp3
  • .wav
  • .ogg

Die gute Nachricht: das Format MP3 ist bei allen aktuellen Browsern verfügbar. Daher hat man den Spaß mit mehreren Dateiformaten nur, wenn man auch alte Browser soweit wie möglich unterstützen möchte! So konnte zum Beispiel die Version 3.5 von Firefox keine MP3-Dateien abspielen und der IE 9 kein WAV-Format.

Hier der Vollständigkeit halber unser HTML-Code mit allen möglichen Angaben:

<audio controls>
  <source src="musik.mp3" type="audio/mpeg">
  <source src="musik.wav" type="audio/wav">
  <source src="musik.ogg" type="audio/ogg">
Sorry - Ihr Browser hat keine Unterstützung für dieses Audio-Format.
</audio>

Umwandeln von Audio-Dateien in verschiedene Formate

Zum Umwandeln der Audio-Dateien bietet sich die Software Audacity an, die auch kostenfrei ist. Diese Software gibt es unter https://www.audacityteam.org

Anmerkung zur Vergangenheit: Flash

Früher wurde für Video- und Audioausgabe Flash genutzt. Dieses Format sollte nicht mehr genutzt werden - besonders im Hinblick auf Tablets und mobile Geräte!