Alle ThemenSuche
powered by

Hintergrundmusik in einer HTML-Datei einfügen - so gelingt's mit HTML5

Falls Sie gerne auf Ihrer Website eine Hintergrundmusik laufen lassen möchten, können Sie dies seit HTML5 mit wenigen Zeilen Quellcode machen, ohne dabei auf zusätzliche Scriptsprachen zugreifen zu müssen. Worauf Sie dabei achten müssen und wie das Einbinden genau funktioniert, erfahren Sie hier.

Weiterlesen

Mit HTML5 schnell und einfach Hintergrundmusik einbinden
Mit HTML5 schnell und einfach Hintergrundmusik einbinden

Audio- und Videoelemente unter HTML5

HTML5 ist die neuste Version von HTML und bietet Ihnen unter anderem die Möglichkeit, ohne externe Skripte bzw. Programmiersprachen schnell und einfach Video- oder Audiodateien in eine Website einzubinden.

  • Dies wird dabei mit den Tags "video" und "audio" umgesetzt, innerhalb derer Sie dann die Quelle Ihrer Video- bzw. Audiodateien angeben müssen.
  • Allerdings müssen Sie bei HTML5 bedenken, dass diese Version von älteren Webbrowsern nicht unterstützt wird, was zum Beispiel beim Internet Explorer 7 oder 8 der Fall ist. 
  • Alle neueren Webbrowser unterstützten ohne Probleme HTML5, sodass Sie auch Hintergrundmusik über den Audio-Tag erstellen können. Dabei müssen jedoch beachten, dass die unterschiedlichen Webbrowser nicht jedes Musikformat unterstützen. Um sicherzugehen, dass Ihre Musik von allen neuen Webbrowsern wiedergegeben werden kann, sollten Sie am besten zwei Musikdateien als Quelle angeben, sodass dann der jeweilige Webbrowser das passende Format abspielen kann.
  • So sollten Sie für die Webbrowser Internet Explorer und Safari das MP3-Format nutzen sowie für Opera und Mozilla Firefox das OGG-Musikformat. Google Chrome kann dagegen sowohl MP3- als auch OGG-Musikdateien ohne Probleme abspielen. 

Hintergrundmusik mit HTML5 einbinden

Mit HTML5 können Sie schnell und einfach Hintergrundmusik für eine Seite erstellen:

  1. Laden Sie dafür zunächst die MP3- und OGG-Version Ihres Hintergrundliedes auf Ihren Webserver hoch und merken Sie sich den Speicherort (zum Beispiel der Ordner "audio").
  2. Öffnen Sie nun die HTML-Datei, in die Sie die Hintergrundmusik einbinden möchten.
  3. Gehen Sie dann an eine beliebige Stelle im body-Bereich und schreiben Sie zunächst den vollständigen Audio-Tag hin, also "".
  4. Geben Sie danach innerhalb des Audio-Tags die Quellen Ihrer Musikdateien an. Sollten diese zum Beispiel "musik.mp3" und "musik.ogg" lauten, müssten Sie "" schreiben. Achten Sie dabei auf den richtigen Pfad bei "src", wobei Sie natürlich auch den absoluten Pfad der Dateien angeben können. Wenn Ihre Website zum Beispiel "ihrewebadresse.de" lautet, wäre der absolute Pfad zur MP3-Datei "http://www.ihrewebadresse.de/audio/musik.mp3".
  5. Damit die Hintergrundmusik automatisch beim Aufrufen abgespielt wird, müssen Sie den Audio-Tag noch um das Attribut "autoplay" erweitern, also "" schreiben. 
  6. Wenn Sie möchten, dass sich die Musik wiederholt, müssen Sie noch "loop" hinzufügen, also "" verwenden. 
  7. Speichern Sie die HTML-Datei ab. Sie müssen diese dann gegebenenfalls noch auf Ihren Webserver hochladen.

Teilen:

Redaktionstipp: Hilfreiche Videos

Musik auf Homepage einbinden - Anleitung
Daniela Leder

Musik auf Homepage einbinden - Anleitung

Wer Musik auf seiner Homepage einbinden will, hat dazu verschiedene Möglichkeiten. Allerdings werden nicht alle Varianten von allen Browsern unterstützt. Am einfachsten ist es, …

YouTube - Lieder in MP3 umwandeln
Daniel Röschler

YouTube - Lieder in MP3 umwandeln

Anfangs war YouTube als reines Videoportal bekannt. Doch mittlerweile findet man auf den Seiten von YouTube auch massenhaft Musik. Um die dort gefundenen Lieder nicht nur in …

Ähnliche Artikel

AUX-IN-Anschluss im Auto richtig nutzen
Bastian Loos

AUX-IN-Anschluss im Auto richtig nutzen

Viele Autoradios im Auto bieten eine seperaten AUX-IN Anschluss für externe Geräte. Dieser Anschluss gibt Ihnen zusätzliche Möglichkeiten.

Mit Free Sound Recorder Audiodateien aufnehmen
Gerd Weichhaus

Free Sound Recorder richtig nutzen

Mit dem kostenlosen Programm Free Sound Recorder können Sie Audiodateien mit Ihrem Computer aufzeichnen und in verschiedenen Formaten abspeichern. Als Tonquelle können sowohl …

Das Plätschern eines Wasserfalls kann als MP3 abgespeichert werden.
Ruth Heiden

Clipfish Converter - Videoclips zu MP3 umwandeln

Sehr viele Menschen nutzen das Internet inzwischen nicht mehr nur allein, um sich Informationsquellen zu schaffen, sondern auch, um eigene Werke und Inhalte zu präsentieren. …

Midis können mithilfe von Programmen auch als Noten dargestellt werden.
Ruth Heiden

Midis selbst erstellen - so geht's

Wenn Sie über Musikformate sprechen, dann haben Sie sicherlich auch schon einmal von MP3s und Midis gehört. MP3 ist ein Format, das sehr gebräuchlich ist und in vielen Playern …

Mit iTunes Musik genießen.
Viktor Peters

iTunes - in MP3-Format Lieder importieren

iTunes ist mittlerweile eine recht beliebte Anwendung geworden. Dies dürfte nicht nur mit dem gefragten iPhone sowie iPad zusammenhängen, sondern auch mit der einfachen …

Musik vom MP3-Player kann mithilfe von Software direkt ins WAV-Format konvertiert werden.
Daniela Huberts

MP3 to WAV - Decoder-Überblick

Sie suchen Software, die MP3 to WAV decodiert? Für diese Aufgabe gibt es viele Programme, sogar Freeware, die Ihre Dateien schnell ins gewünschte Format bringt.

Schon gesehen?

MP3 zusammenfügen - so klappt's
Kevin Höbig

MP3 zusammenfügen - so klappt's

Wenn Sie mehrere MP3-Dateien auf Ihrem Computer haben und diese gerne zu einer Audio-Datei zusammenfügen wollen, können Sie dies schnell und einfach mit dem kostenlosen …

Das könnte sie auch interessieren

Html/Rce.Gen entfernen - so geht's
Alexander Bürkle

Html/Rce.Gen entfernen - so geht's

Bei der Malware Html/Rce.Gen handelt es sich um einen HTML-Skriptvirus, der sich relativ schnell über das Internet verbreitet. Wenn Ihre Antivirensoftware diesen Schädling …

Mindmaps lassen sich ganz leicht online erstellen.
Sabrina Friedrich

Online eine Mindmap erstellen - so geht's

Egal ob im Beruf oder im Studium - Mindmaps sind eine sinnvolle Methode, die eigenen Ideen aufzugreifen und visuell zu veranschaulichen. Mittlerweile ist es auch möglich, …

Email-Adresse erstellen bei GMX - so geht's
Anne Leibl

Email-Adresse erstellen bei GMX - so geht's

Es gibt zahlreiche Freemail-Anbieter, GMX ist einer der bekanntesten von ihnen. Eine kostenlose Email-Adresse lässt sich bei GMX in nur wenigen Schritten einfach einrichten.

Soldaten schützen Ihr Reich.
Alexander Bürkle

Little Empire - Tipps

Little Empire ist ein sehr beliebtes Spiel, das als Smartphone-App auf jedem Android-Smartphone installiert werden kann. Das Spiel macht sehr viel Spaß und ist vollkommen …