HTML-Hintergrundmusik-Widget
Erstelle dein Hintergrundmusik-Widget
Screenshots
Warum Nutzer Elfsight lieben.
Musik macht Momente unvergesslich. Mit dem Elfsight Background Music Widget fügen Sie HTML-Seiten im Handumdrehen Hintergrundmusik hinzu. Ob ruhige Instrumentalstücke fürs Portfolio, beschwingte Tracks für eine Veranstaltungsseite oder saisonale Playlists für Ihren Shop – Sie legen die Stimmung fest, und Ihre Besucher spüren es sofort.
Schnell eingerichtet und noch leichter zu verwalten. Sie brauchen kein Fachwissen, um Hintergrundmusik manuell in HTML einzubinden oder mit komplizierten Skripten zu arbeiten. Entwerfen Sie einfach Ihren Audioplayer, kopieren Sie eine Codezeile und fügen Sie sie dort ein, wo die Musik laufen soll.
Wissen Sie schon?
Eine Verbraucherumfrage ergab, dass 70 % der Kunden sich stärker mit einer Marke verbunden fühlen, wenn sie deren maßgeschneiderte Musikauswahl hören.
Lassen Sie Ihre Marke diese Verbindung herstellen – Hintergrundmusik mit Elfsight noch heute kostenlos hinzufügen und Ihren Besuchern hören lassen, wie Ihre Marke klingt.
Hauptfunktionen des HTML-Hintergrundmusik-Widgets
Was dieses Widget besonders macht:
- Individuelle Player-Stile: Passen Sie die Musik-Steuerelemente an Ihre Markenfarben und Schriftarten an.
- Flexible Wiedergabe: Wählen Sie, ob automatisch gestartet, wiederholt oder Besucher die Wiedergabe steuern sollen.
- Mehrere Tracks: Füge einen Song oder eine komplette Wiedergabeliste hinzu – perfekt für besondere Kampagnen.
- Überall einsetzbar: Von Portfolios bis zu Online-Shops – es ist einfach, Hintergrundmusik in HTML einzubetten oder abzuspielen.
- Anfängerfreundlich: Wenn Sie Text kopieren und einfügen können, richten Sie es ganz einfach ein – HTML-Code für Hintergrundmusik brauchen Sie nicht von Hand zu bearbeiten.
- Responsives Design: Der Player läuft nahtlos auf Desktop, Tablet und Mobilgeräten.
Wie man HTML-Hintergrundmusik hinzufügt
So geht es in zwei einfachen Schritten:
Methode 1: Inline-Musik-Player
Perfekt, wenn Musik nur auf bestimmten Seiten laufen soll – zum Beispiel auf Ihrer Startseite oder Landingpage. Der Player fügt sich nahtlos in Ihren Content ein, dort, wo Sie ihn platzieren.
- Vorlage auswählen: Öffnen Sie den Elfsight-Editor und wählen Sie Ihren Player-Stil.
- Anpassen des Widgets: Laden Sie Ihre Tracks hoch oder verknüpfen Sie Ihre Quelle, stellen Sie Autoplay, Schleife und Lautstärke ein.
- Code generieren: Klicken Sie auf „Zur Website hinzufügen“ und kopieren Sie das Code-Snippet.
- Auf der Website einbetten: Fügen Sie es genau dort ein, wo der Player in Ihrer HTML-Seite erscheinen soll.
Methode 2: Schwebender Audioplayer
Ideal, wenn der Soundtrack beim Scrollen mitfolgen soll. Der schwebende Audioplayer bleibt unten oder am Seitenrand des Bildschirms sichtbar, sodass Ihre Musik immer nur einen Klick entfernt ist.
- Vorlage auswählen: Wählen Sie ein schwebendes Layout wie eine untere Leiste oder eine Seitenleiste.
- Widget anpassen: Fügen Sie Spuren hinzu, gestalten Sie das Design, legen Sie Wiedergabe- und Wiedergabelisten-Optionen fest.
- Code generieren: Nachdem Sie die Anpassung abgeschlossen haben, klicken Sie auf „Kostenlos zur Website hinzufügen“ und kopieren Sie den Einbettungscode aus dem Editor.
- Auf Ihrer Website einbetten: Fügen Sie es in Ihren HTML-Code direkt vor dem schließenden
</body>-Tag ein, damit es auf der gesamten Website erscheint.
Noch mehr Anleitung nötig? Besuchen Sie unser Hilfecenter, lesen Sie unseren Blogartikel darüber, wie Sie Hintergrundmusik zu Ihrer Website hinzufügen. Teilen Sie gerne neue Ideen in der Wunschliste. Für aktuelle Updates schauen Sie in den Changelog.