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.

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>
Ausgabe des HTML Codes

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