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.

Redaktionstipp: Hilfreiche Videos

AUP-Datei in MP3 umwandeln - so geht's
Gerd Weichhaus

AUP-Datei in MP3 umwandeln - so geht's

AUP-Dateien sind Projekte des Audioeditors Audacity. Zum Umwandeln dieser Dateien in das MP3-Format benötigen Sie dieses Programm, welches kostenlos vom Hersteller …

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 …

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 …

Mehr Themen

Meist sind es mehrere Ursachen, wenn die Geschwindigkeit schwankt.
Roswitha Gladel

WLAN-Geschwindigkeit schwankt stark - Abhilfe

Die WLAN-Geschwindigkeit hängt von verschiedenen Faktoren ab. Es ist normal, dass diese etwas schwankt. Wenn es aber zu einem häufigen starken Absinken der Übertragungsrate …

Das Mixen von Musik am Computer ist ein sehr beliebtes Hobby.
Caroline Schröder

MPC für PC - Möglichkeiten

MPC ist als Abkürzung für Music Production Center bekannt. Dabei handelt es sich jedoch nicht um ein bestimmtes Programm, sondern um einen Oberbegriff. Unter diesen wird …

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.

Einen eigenen Blog erstellen geht schnell und leicht!
Johannes Pries

So richtet man sich einen eigenen Blog ein

Einen eigenen Blog gestalten ist eine schöne Art, die persönlichen Gedanken mit der Welt zu teilen. Man kann Erfahrungen, Rezepte, Fotos oder Gedichte veröffentlichen - und …

Für die Tierzucht benötigen Sie Zäune.
Alexander Bürkle

Minecraft: Zaun und Tor bauen - so geht's

Im beliebten Computerspiel Minecraft können Sie Ihre Spielwelt vollkommen individuell gestalten und verschiedene Sachen bauen. Möchten Sie bestimmte Tiere züchten, so sollten …