Musik einbinden

HTML







HTML-Vorschau für Deine Audio-Datei
html
<audio controls autoplay loop>
<source src="musikdateiname.mp3" type="audio/mpeg">
</audio>





１. Gehe auf https://pixabay.com/music

２. Suche Dir eine Musik aus:
→ Ich habe „Birds and Waterfall“ gewählt.

３. Klicke auf „Download“
→ Du bekommst eine Datei, z. B. eine .mp3.

４. Lade die Datei auf Deine Webseite hoch.
→ Am besten in einen Ordner wie sounds/ oder audio/.
html
<audio controls autoplay loop>
<source src="musikdateiname.mp3" type="audio/mpeg">
</audio>
▸ controls zeigt die Steuerung an.
▸ autoplay versucht, die Datei automatisch zu starten.
▸ loop lässt die Musik wiederholen.

Hinweis: „autoplay“ wird von manchen Browsern blockiert, daher wird die Musik in diesem Fall nicht automatisch abgespielt.

Tipp: Ersetze im Code "musikdateiname.mp3" durch den Pfad Deiner Datei,
z. B. "sounds/birds-and-waterfall.mp3".

Falls Du den Player im Hintergrund abspielen möchtest, kannst Du es so machen:
Der folgende Code startet die Musik automatisch, wiederholt sie und blendet den Player aus.

Einfach dort einfügen, wo die Musik starten soll:
html
<audio autoplay loop hidden>
<source src="musikdateiname.mp3" type="audio/mpeg">
</audio>
♦ Was die Attribute bedeuten:
 ▸ id="audioPlayer" — Damit wir den Player mit JavaScript steuern können.
▸ autoplay — Startet die Musik automatisch.
▸ loop — Spielt die Musik in Endlosschleife.
▸ hidden — Versteckt den Player auf der Seite.

Optional: Lautstärke anpassen mit JavaScript
Füge diesen Code direkt unter dem Audio-Element oder am Ende Deiner Seite ein:
html
<script>
const audio = document.getElementById('audioPlayer');
audio.volume = 0.3; // Lautstärke von 0.0 (leise) bis 1.0 (laut)
</script>
♦ Hinweis zur Lautstärke:
 ▸ audio.volume steuert die Lautstärke.
▸ Der Wert liegt zwischen 0.0 (stumm) und 1.0 (maximal).
▸ 0.3 entspricht 30% Lautstärke.

Das war's auch schon von mir. 😊
Verfasst am 21.Mai 2008, aktualisiert am 16.Juli 2025