HTML Grundlagen: Wie du mit dem audio Tag spielend leicht Audio-Dateien in deine Webseite integrierst

Audio Player in die Webseite einbinden

Mit dem neuen AUDIO-Tag von HTML5 kannst du Musik oder eine andere Audio-Datei 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 Kompatibilitäts-Probleme.

Das HTML AUDIO-Tag wird verwendet, wenn man Sound, Musik oder eine andere Audio-Datei in eine Webseite einbinden 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

Das HTML <audio> Tag

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.

<audio controls>
    <source="/audio/fluidity-19.mp3" type="audio/mpeg">
    Dein Browser unterstützt dieses Audio-Format leider nicht.
</audio>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Durch das Attribut controls wird ein Kontrollfeld eingeblendet, damit die Nutzer die Bedienelemente Play, Pause und Volume benutzen können. 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.

Alle aktuellen Browser unterstützen das Audio-Format MP3. Die Audio-Formate WAV und OGG muss man nur angeben, wenn auch ältere 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.