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

Tabulator in HTML erzeugen - so gelingt's
Kevin Höbig
Internet

Tabulator in HTML erzeugen - so gelingt's

In einer HTML können Sie grundsätzlich nicht einfach so einen Tabulator erstellen lassen, da dieser vom Browser gar nicht oder nur als einfaches Leerzeichen verstanden werden …

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

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 …

Ähnliche Artikel

Audible-Dateien in MP3 umwandeln - so wird's gemacht
Daniela Born
Unterhaltungselektronik

Audible-Dateien in MP3 umwandeln - so wird's gemacht

Wenn Sie Ihre Hörbücher von Audible haben, können Sie diese Dateien in das gängige MP3-Format umwandeln. In dieser Anleitung können Sie lesen, wie es gemacht wird.

AUX-IN-Anschluss im Auto richtig nutzen
Bastian Loos
Auto

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.

Bei iTunes eine Playlist erstellen - so geht´s
Youssef Sindi
Software

Bei iTunes eine Playlist erstellen - so geht's

Eine Playlist bringt viele Vorteile mit sich. Es bezeichnet eine Liste von Liedern und Videos in Abspielreihenfolge, die automatisch wiedergegeben werden. Diese Funktion zur …

Im Internet kann man Rechnungen einsehen.
Gastautor
Internet

Kabel-BW-Rechnung online einsehen - so geht's

Kabel-BW bietet seinen Kunden an, die Kabel-BW-Rechnung per E-Mail im PDF-Format zuzusenden. Gleichzeitig werden alle Rechnungen zwei Jahre im Internet archiviert und können …

Mit Free Sound Recorder Audiodateien aufnehmen
Gerd Weichhaus
Computer

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
Internet

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
Software

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 …

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

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?

In HTML eine Sidebar gestalten - so geht's mit CSS
Kevin Höbig
Internet

In HTML eine Sidebar gestalten - so geht's mit CSS

Wenn Sie ein neues Layout für Ihre Website planen und dabei gerne eine Sidebar für eine Navigation erstellen möchten, können Sie dies relativ einfach mit wenigen HTML-Zeilen …

Das könnte sie auch interessieren

Das Verwalten persönlicher Daten wird immer aufwendiger durch eine Vielzahl von Services.
Tobias Gawrisch
Internet

Google-Kontakte löschen

Google etabliert sich zunehmend als digitale Zentrale mit allen unseren Kontaktdaten. Daher ist die Verwaltung der Google-Kontakte zunehmend relevanter, da die einzelnen …

Jana Kaszyda
Computer

Steam-Account - was ist er wert?

Steam ist eine große Anlaufstelle für Gamer, auf der Computerspiele vertrieben werden. Die Besonderheit ist, dass Sie als Gamer Ihre Lieblingsspiele in nur wenigen Klicks …

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

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.

Google: Einträge löschen lassen - so geht's
Viktor Peters
Internet

Google: Einträge löschen lassen - so geht's

Wenn Sie Ihren Namen in Google eingeben und dann auf unerwünschte Einträge stoßen, können Sie reagieren und die gefundenen Elemente löschen lassen. So erreichen Sie, dass …