In HTML können wir Audio- und Videoinhalte direkt in die Webseiten einbetten, indem wir die <audio>- und <video>-Tags verwenden. Lassen Sie uns zuerst das Einbetten von Audio besprechen:

Einbetten von Audio

Das <audio>-Tag bettet Audioinhalte in ein HTML-Dokument ein. Es ermöglicht Ihnen, Audiodateien direkt im Browser abzuspielen.

Audio-Attribute

• controls: Fügt dem Player Standard-Audiosteuerungen wie Abspielen, Pause und Lautstärkeregelung hinzu;
• autoplay: Gibt an, ob das Audio automatisch abgespielt werden soll, wenn die Seite geladen wird;
• loop: Gibt an, ob das Audio kontinuierlich wiederholt werden soll.

Beispiel:

<audio controls autoplay loop>
  <!-- Some other tags -->
</audio>

Vielleicht ist Ihnen aufgefallen, dass wir nur die Eigenschaften des Audioplayers angegeben haben, aber nicht erwähnt haben, woher das Audio kommt. Wir benötigen das <source>-Tag.

Quelle

Das <source>-Tag wird innerhalb des <audio>-Tags verwendet, um die URL der Audiodatei und ihre Attribute anzugeben. Wir können das src-Attribut verwenden, um die URL der Audiodatei anzugeben, und das type-Attribut, um den MIME-Typ der Audiodatei zu spezifizieren.
Beispiel:

<audio controls autoplay loop>
  <source src="audio-url.mp3" type="audio/mpeg" />
  <source src="audio-url.ogg" type="audio/ogg" />
  Your browser does not support the audio element.
</audio>

Im obigen Beispiel:

• Das <audio>-Tag enthält Attribute wie controls, autoplay und loop;
• Die <source>-Tags geben die Quell-URLs der Audiodateien und deren MIME-Typen an;
• Wenn der Browser das <audio>-Tag oder die angegebenen Audioformate nicht unterstützt, wird der alternative Text Your browser does not support the audio element. angezeigt.

Video-Tutorial