HTML Grundlagen: Audio-Inhalte in HTML hinzufügen • Abspielen einer Audiodatei • Musik einbinden

Audio Player in die Webseite einbinden

Mit dem neuen AUDIO-Tag von HTML5 kannst du Musik oder andere Audio-Dateien sehr einfach und ohne Flash oder andere Audio Plug-ins in deine Webseite einbinden. Alle aktuellen Web-Browser inklusive der mobilen Browser unterstützen den Audio-Befehl ausgezeichnet. Deshalb gibt es bei der Wiedergabe keine Probleme mit der Kompatibilität.

Das HTML <audio> Tag

Das HTML AUDIO-Tag wird verwendet, wenn man Sound, Musik oder eine andere Audio-Datei in eine HTML Seite einfügen möchte. Zur Zeit werden 3 Audio-Formate unterstützt.

• mp3 – MIME-type audio/mpeg

• wav – MIME-type audio/wav

• ogg – MIME-type audio/ogg

Der Audio-Player wird mit <audio> eingeleitet und muss mit </audio> abgeschlossen werden.

Füge folgenden Code in den Quellcode deiner Webseite ein, um ein Audio einzubinden.

Durch das Attribut controls wird ein Kontrollfeld eingeblendet, damit der Nutzer die Bedienelemente Play, Pause, Stop und Volume benutzen kann. Das Attribut controls sollte man immer angeben.

Das Attribut type ist notwendig, weil es verschiedene Audio-Formate gibt, die je nach Browser und Browser-Version aus Lizenzgründen entweder unterstützt werden oder nicht unterstützt werden.

Das Audio-Format mp3 unterstützen alle aktuellen Web-Browser. Die Audio-Formate wav und ogg muss man nur angeben, wenn auch ältere Web-Browser unterstützt werden sollen.

Weitere Attribute für den Audio-Player

• Attribut preload
  Mit diesem Attribut wird bestimmt, wie die Audio-Datei geladen werden soll. Folgende Werte sind möglich: auto, metadata, none.

  Mit preload="auto" entscheidet der Browser automatisch, was vorgeladen wird.

  Mit preload="metadata" werden nur die Metadaten ohne die eigentlichen Audio-Daten (z.B. Name und Dauer) vorgeladen.

  Mit preload="none" werden keine Daten vorgeladen. Das Laden der Audio-Datei beginnt erst mit einem Klick auf Play.

• Attribut autoplay
  Die Wiedergabe der Audio-Datei wird sofort nach dem Laden der Webseite gestartet. Dies kann für den Besucher der Website störend sein.

• Attribut loop
  Hiermit wird die Audio-Datei in einer Endlosschleife abgespielt.

• Attribut volume (Lautstärke)
  Mit volume="Startwert" kann die Lautstärke auf einen beliebigen Wert zwischen 0.0 und 1.0 eingestellt werden. Es sollte für die Lautstärke kein Startwert über 0.25 (d.h. 25 Prozent) gewählt werden.

• Attribut muted
  Hiermit wird die Wiedergabe stummgeschaltet. Der Besucher muss die Lautstärke anschließend mit dem Lautstärkeregler individuell einstellen.