HTML Grundlagen: Lerne hier, wie man mit dem audio Tag Audio-Inhalte in deine Webseite einbinden kann

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-Player mit dem <audio> Tag in die Webpage einbinden

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

Durch das Attribut controls wird ein Kontrollfeld eingeblendet, damit die Nutzer die Bedienelemente Play, Pause und Volume benutzen können. Das controls-Attribut sollte immer angegeben werden.

Das type-Attribut 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 den Play Button.

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