HTML Grundlagen: Musik und Audio-Dateien einfügen mit <audio>

Audio Player in die Webseite einbinden

Mit dem neuen Audio Tag kannst Du Musik oder andere Audio-Dateien sehr einfach und ohne Flash oder andere Plugins in deine Webseite einbinden. Alle aktuellen Web-Browser inklusive der mobilen Versionen unterstützen den AUDIO Befehl sehr gut. Deshalb gibt es bei der Wiedergabe in der Regel keine Kompatibilitätsprobleme.

HTML <audio> TagDas HTML AUDIO Tag wird verwendet, um Sound, Musik oder eine andere Audio-Datei zu einer HTML Seite hinzufügen. 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 »Lautstärke« benutzen kann. Das Attribut controls sollte immer angegeben werden.

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

Das Audio-Format MP3 wird von allen aktuellen Browsern unterstützt. Die Audio-Formate wav und ogg müssen nur angegeben werden, 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
  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.