HTML: Audio Datei einbinden – Hintergrundmusik

Nicht deine Sprache?

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="http://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

[the_ad_group id=“4427″]

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.


Über Mich





Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
smileys


OpenOffice: Textfeld einfügen und bearbeiten – So gehts

Textfelder sind in OpenOffice extrem hilfreich wenn du Dokumente erstellen möchtest. Ein Textfeld in OpenOffice...

OpenOffice: Sprache ändern und einstellen – So gehts

Oft ist OpenOffice nicht in der Sprache in der du arbeiten möchtest. Aber keine Sorge...

FritzBox: eigene Rufnummer anzeigen – So gehts

Oft hat man einen neuen Kabelanschluss oder ein neues Telefon, aber man weiß selbst garnicht...

FritzBox: Energiesparmodus aktivieren – So gehts

Wenn man an die Umwelt denkt, dann hat sich auch AVM darüber Gedanken gemacht. Denn...

FritzBox: Update & aktualisieren- So gehts

Es ist wichtig immer die Neusten Sicherheitsupdates für deine FritzBox zu installieren. Das ist nicht...

FritzBox: Einstellungen sichern und speichern

Oft ist es nicht schlecht ein Backup von den Einstellungen deiner FritzBox zu erstellen. Das...

FritzBox: Sprache ändern – So gehts

Wenn Deutsch nicht deine Muttersprache ist, dann kannst du die Sprache deiner FritzBox ändern und...

FritzBox: Sendeleistung erhöhen – So gehts

Hast du das Gefühl das deine Fritzbox nicht mit maximaler Power sendet? Du möchtest die...

FritzBox: Funkkanal ändern – So gehts

Wenn auf deinem jetzigen Funkkanal viele andere Router sind, dann solltest du ihn ändern um...

FritzBox: WLAN Name ändern – So gehts

In diesem Hilfebeitrag werde ich dir zeigen, wie du den Namen deiner FritzBox ändern kannst...

FritzBox: Zeitzone einstellen und ändern – So gehts

Normalerweise musst du die Uhrzeit von deiner Fritzbox nicht selber einstellen. Sie wird automatisch von...

FritzBox: Rufnummer sperren – So gehts

Na, bist du auch genervt von lästigen Anrufen? Keine Sorge, mit der Fritz!Box kannst du...

FritzBox: DNS Server ändern – So gehts

Natürlich kann ich Dir dabei helfen, den DNS Server in Deiner Fritzbox zu ändern. Mit...

FritzBox: Gastzugang einrichten – So gehts

Klar, ich helfe dir gerne dabei, einen Gastzugang auf deiner FritzBox einzurichten. Hier ist eine...

FritzBox: Kennwort ändern – So gehts

Wenn du das Kennwort deiner FritzBox ändern möchtest, kannst du dies ganz einfach über die...