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

HTML: Audio Datei mit Player einbinden

1. Bevor du die Audio Datei mit HTML einbinden kannst musst du sie auf deinen Webspace mit Hilfe eines FTP Programms hochladen. Dafür kannst du Filezilla oder Cyberduck verwenden

Dann wird mit dem Folgenden Code die Audio Datei in dein HTML Dokument eingebunden.

<audio id="audio_with_controls" src="https://deineWebseite.de/webspace/AudioDatei.mp3" controls="controls">

Durch das Attribut audio_with_controls wird ein Player angezeigt, so das die Audiodatei vom Benutzer abgespielt werden kann.

HTML: Audio Datei als Hintergrundmusik einbinden

Wenn du eine HTML Datei als Hintergrundmusik einbinden möchtest dann funktioniert das am besten mit diesem Codebeispiel.

Zuerst musst du auch die jeweilige Musik auf deinen Webspace hochladen. Einbinden kannst du die Audio Datei dann mit folgendem Code.

<embed src="songtitel.mp3" width="152" height="24" name="Songtitel"></embed>

Erklärung der Parameter

autostart=“false“ : -> Stellt ein ob die Hintergrundmusik automatisch abgespielt wird
VOLUME=“35″:-> Legt die Lautstärke der Musik fest.
controls=“smallconsole:-> Legt fest ob Player Knöpfe angezeigt werden sollen.

Jetzt HTML lernen

Fazit

Eine Audio Datei lässt sich relativ einfach in eine HTML Datei einbinden. Du musst nur darauf achten zu welchem Zweck du die Datei einbinden möchtest. Für eine Audiodatei mit der der Nutzer den Player selbst bedienen soll empfiehlt sich das Erste Code Beispiel. Wenn du es als Hintergrundmusik nutzen willst ist das zweite besser, da es einen Autoplay Parameter hat.

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

Das könnte dich interessieren!

Weitere Kategorien