HTML5 Hintergrund-Audioplayer - Hintergrundmusik mit Lautstärkeregler & seitenübergreifender Wiedergabe

Hintergrundmusik, aber mit Anstand

Audio, das ein Besucher nicht stoppen kann, ist der schnellste Weg, ihn zu verlieren. Dieses Modul bringt Hintergrundmusik in Ihren Shop — mit einer sichtbaren Steuerung ab der ersten Sekunde: Play, Pause, Zurückspulen und ein Lautstärkeregler, immer in Reichweite. Boutiquen, Musik- und Instrumentenshops, Event- und Hochzeitsseiten, Galerien und Themenshops bekommen die Atmosphäre, die sie wollen — und die Kunden behalten die Fernbedienung.

So funktioniert es

• 1. Audioquelle festlegen — fügen Sie eine https://-URL ein oder laden Sie eine MP3-, OGG- oder WAV-Datei (bis 10 MB) direkt im Modul hoch.
• 2. Position wählen — Kopfleiste, Footer oder linke bzw. rechte Spalte. Die Konfigurationsseite zeigt eine Live-Vorschau des Players mit Ihren gespeicherten Einstellungen.
• 3. Details feinjustieren — Standardlautstärke, GIF- oder PNG-Icon-Set, Player-Breite, Anzahl der Lautstärkebalken und Skin-Farben sowie Schalter für Autoplay und automatische Fortsetzung.

Der Player merkt sich, wo die Musik war

Aktivieren Sie die automatische Fortsetzung, und der Player speichert Wiedergabeposition und Lautstärke in einem Cookie. Der Weg von der Startseite zur Produktseite setzt denselben Titel auf die Sekunde genau fort, statt ihn neu zu starten. Deaktivieren Sie die Option, beginnt jede Seite von vorn — ganz wie Sie möchten.

Nur dort zeigen, wo er hingehört

Die Einstellung „Erlaubte Seiten“ nimmt eine kommagetrennte Liste von Controllern entgegen — zum Beispiel index,product — sodass der Player nur auf Ihrer Startseite, nur auf Produktseiten oder überall laufen kann. Lassen Sie das Feld leer, erscheint er auf jeder Seite.

Neu gebaut für modernes PrestaShop

• Vanilla-JavaScript — keine jQuery-Abhängigkeit, kein Flash, kein veralteter Player.
• Skinning über CSS-Variablen — die Farben werden im Seitenkopf eingefügt, sodass der Player zu Ihrem Theme passt, ohne dass Sie Stylesheets bearbeiten müssen.
• Keine Core-Overrides — das Modul arbeitet ausschließlich über Hooks; Templates lassen sich bei Bedarf aus Ihrem Theme heraus überschreiben.
• Stabilitätskorrekturen — der Absturz in der rechten Spalte aus früheren Versionen ist behoben, und ein Debug-Modus schreibt Diagnosemeldungen in die Browser-Konsole, wenn Sie etwas prüfen möchten.

Kompatibilität

PrestaShop 1.7, 8 und 9. Nutzt das native HTML5-Audio des Browsers und funktioniert damit ohne Plugin in modernen Desktop- und Mobilbrowsern. Beachten Sie: Browser blockieren Autoplay mit Ton, bis der Besucher mit der Seite interagiert — die Play-Schaltfläche funktioniert immer, und das Modul protokolliert es im Debug-Modus.

Häufig gestellte Fragen

Können Besucher die Musik ausschalten?

Ja, genau darum geht es. Der Player zeigt Play/Pause, Zurückspulen und einen Lautstärkeregler, sobald die Seite geladen ist.

Läuft die Musik beim Seitenwechsel weiter?

Mit aktivierter automatischer Fortsetzung ja — Position und Lautstärke werden in einem Cookie gespeichert, sodass der Titel dort weiterläuft, wo er aufgehört hat, statt neu zu starten.

Welche Audioformate kann ich verwenden?

MP3, OGG und WAV, entweder als vollständige https://-URL oder als Datei, die Sie in das Modul hochladen (bis 10 MB).

Warum startet die Wiedergabe nicht von selbst?

Moderne Browser blockieren Autoplay mit Ton, bis der Besucher mit der Seite interagiert. Das ist eine Browserregel und keine Einschränkung des Moduls; lassen Sie Autoplay aktiviert, und die Wiedergabe startet, sobald eine Interaktion erfolgt.

Kann ich ihn nur auf der Startseite anzeigen?

Ja. Tragen Sie index in das Feld „Erlaubte Seiten“ ein — oder eine beliebige kommagetrennte Liste von Controllern. Für alle Seiten lassen Sie das Feld leer.

Kann ich das Aussehen ändern?

Ja — Position, Breite, Icon-Set, Anzahl der Lautstärkebalken und die Skin-Farben sind allesamt Einstellungen, die über CSS-Variablen angewendet werden, sodass an Ihrem Theme nichts bearbeitet werden muss.