HTML: Audio Datei einbinden – Hintergrundmusik

Ad

Wenn du in deine Webseite eine Hintergrundmusik in Form einer Audiodatei einbinden möchtest, dann ist das ganz einfach und unkompliziert. Wie das geht zeige ich dir in diesem Beitrag

So bindest du Audiodateien in HTML ein:

<audio>-Element:

HTML
<audio controls>
  <source src="audiodatei.mp3" type="audio/mpeg">
  <source src="audiodatei.ogg" type="audio/ogg">
  Ihr Browser kann keine Audio-Elemente darstellen.
</audio>

Erklärung

  • controls: Fügt Bedienelemente für die Wiedergabe hinzu (z. B. Start/Stopp, Lautstärke).
  • src: Legt die URL der Audiodatei fest. Du kannst mehrere source-Elemente für verschiedene Formate angeben (z. B. MP3, OGG).
  • Der Text innerhalb des audio-Elements wird angezeigt, falls der Browser keine Audiowiedergabe unterstützt.

Weitere Attribute:

  • autoplay: Startet die Wiedergabe automatisch beim Laden der Seite.
  • loop: Lässt die Audiodatei in einer Schleife abspielen.
  • preload: Legt fest, ob die Audiodatei vorab geladen werden soll („auto“, „metadata“, „none“).

<embed>(veraltet):

Diese Methode ist veraltet, verwende sie am besten nicht!!

HTML
<embed src="audiodatei.mp3" controls>

Erklärung:

  • src: Legt die URL der Audiodatei fest.
  • controls: Fügt Bedienelemente für die Wiedergabe hinzu.

Nachteile:

  • Funktioniert nicht in allen Browsern.
  • Bietet weniger Kontrolle über die Darstellung und Wiedergabe.

Zusätzliche Informationen:

  • Wähle Audioformate, die von den meisten Browsern unterstützt werden (z. B. MP3, Ogg).
  • Biete alternative Downloadmöglichkeiten für Benutzer, die keine Audiowiedergabe im Browser nutzen möchten.
  • Berücksichtige Barrierefreiheit und stelle sicher, dass deine Audioinhalte mit Screenreadern und anderen Hilfsmitteln zugänglich sind.

Über Mich


Weitere Beiträge auf Blogseite.com




Kennst du schon diese Memes?