HTML - Audio-Element

Hallo, angehende Web-Entwickler! Heute tauchen wir in die wunderbare Welt der HTML-Audioelemente ein. Als jemand, der dies seit Jahren unterrichtet, kann ich Ihnen sagen, dass das Hinzufügen von Sound zu Ihren Webseiten sie wirklich zum Leben erwecken kann. Also, lassen Sie uns loslegen!

Syntax

Das HTML <audio>-Element wird verwendet, um Audioinhalte in Dokumente einzubetten. Es ist eine relativ neue Ergänzung zu HTML, die mit HTML5 eingeführt wurde und das Spiel verändert hat, wie wir Audio auf Websites einbinden.

Hier ist die grundlegende Syntax:

<audio src="audio_file.mp3" controls>
Ihr Browser unterstützt das Audio-Element nicht.
</audio>

Lassen Sie uns das auseinandernehmen:

• <audio>: Dies ist die Öffnungsmarkierung für das Audioelement.
• src="audio_file.mp3": Dieses Attribut gibt die Quelle der Audiodatei an.
• controls: Dieses Attribut fügt Audio-Steuerungen hinzu, wie Abspielen, Pausieren und Lautstärke.
• Der Text zwischen den Öffnungs- und Schließmarkierungen wird angezeigt, wenn der Browser das Audioelement nicht unterstützt.

Wie man Audio in HTML einbetten kann?

Nun, da wir die grundlegende Syntax kennen, schauen wir uns an, wie man Audio tatsächlich in sein HTML-Dokument einbettet. Es gibt einige verschiedene Möglichkeiten, und ich werde Ihnen jede davon zeigen.

Methode 1: Verwenden des src-Attributes

Dies ist die einfachste Methode:

<audio src="path/to/audio.mp3" controls></audio>

Methode 2: Verwenden des <source>-Elements

Diese Methode ermöglicht es, mehrere Audiquellen anzugeben:

<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
<source src="path/to/audio.ogg" type="audio/ogg">
Ihr Browser unterstützt das Audio-Element nicht.
</audio>

In diesem Beispiel versucht der Browser, die MP3-Datei zuerst abzuspielen. Wenn er kann, spielt er sie ab, ansonsten wechselt er zur OGG-Datei. Wenn er weder das eine noch das andere abspielen kann, zeigt er die Textnachricht an.

Methode 3: Verwenden von JavaScript

Für eine fortgeschrittene Kontrolle können Sie JavaScript verwenden:

<audio id="myAudio">
<source src="path/to/audio.mp3" type="audio/mpeg">
Ihr Browser unterstützt das Audio-Element nicht.
</audio>

<button onclick="playAudio()">Abspielen</button>

<script>
function playAudio() {
var audio = document.getElementById("myAudio");
audio.play();
}
</script>

Diese Methode gibt Ihnen mehr Flexibilität bei der Steuerung, wann und wie das Audio abgespielt wird.

Beispiele für das HTML-Audio-Element

Schauen wir uns einige weitere Beispiele an, um unser Verständnis zu festigen.

Beispiel 1: Einfacher Audio-Player

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Ihr Browser unterstützt das Audio-Element nicht.
</audio>

Dies erstellt einen einfachen Audio-Player mit Steuerungen. Er versucht zuerst eine OGG-Datei abzuspielen, dann eine MP3, wenn OGG nicht unterstützt wird.

Beispiel 2: Automatisches Abspielen und Wiederkunft

<audio controls autoplay loop>
<source src="background_music.mp3" type="audio/mpeg">
Ihr Browser unterstützt das Audio-Element nicht.
</audio>

Dieses Audio beginnt automatisch mit dem Abspielen, wenn die Seite geladen wird, und wird kontinuierlich wiedergegeben. Seien Sie jedoch vorsichtig mit dem automatischen Abspielen - es kann für Benutzer ärgerlich sein!

Beispiel 3: Attribut preload

<audio controls preload="auto">
<source src="interview.mp3" type="audio/mpeg">
Ihr Browser unterstützt das Audio-Element nicht.
</audio>

Das Attribut preload tells the browser, was er beim Laden der Seite tun soll. "auto" bedeutet, der Browser sollte die gesamte Audiodatei laden.

Browserunterstützung für verschiedene Audioformate

Nun, hier ist etwas Wichtiges zu verstehen: Nicht alle Browser unterstützen alle Audioformate. Lassen Sie uns das in einer Tabelle zusammenfassen:

Format	Chrome	Firefox	Safari	Opera	Internet Explorer
MP3	Ja	Ja	Ja	Ja	Ja (9+)
WAV	Ja	Ja	Ja	Ja	Nein
OGG	Ja	Ja	Nein	Ja	Nein

Wie Sie sehen können, ist MP3 das am weitesten unterstützte Format. Deshalb ist es oft eine gute Idee, eine MP3-Version Ihres Audios bereitzustellen.

Hier ist ein Profi-Tipp aus meinen Jahren des Unterrichtens: Stellen Sie immer mindestens zwei verschiedene Formate Ihrer Audiodatei bereit. Auf diese Weise decken Sie die meiste Browserunterstützung ab.

Zusammenfassend lässt sich sagen, das HTML-Audio-Element ist ein mächtiges Werkzeug, um Sound in Ihre Webseiten zu integrieren. Egal, ob Sie einen Musikplayer erstellen, Hintergrundmusik hinzufügen oder Audioclips in Ihren Inhalt einbetten, das Verständnis des <audio>-Elements ist unerlässlich.

Denken Sie daran, der Schlüssel zum Beherrschen dessen (und jedem anderen Codingkonzept) ist die Übung. Also probieren Sie es aus, betten Sie einige Audioinhalte in Ihre HTML-Dokumente ein. Spielen Sie mit den verschiedenen Attributen und Methoden, die wir besprochen haben. Und am wichtigsten: Haben Sie Spaß dabei! Wer weiß, vielleicht sind Sie der Nächste, der eine virale audio-basierte Website erstellt!

Credits: Image by storyset