HTML: Audio Datei einbinden – Hintergrundmusik

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:

<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!!

<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

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite