Musikplayer-Einstellungen

Für Plain Jane und Plain Jane Interactive

Was Sie lernen werden

• So aktivieren und anpassen Sie den integrierten Musikplayer

• So laden Sie eigene Audiodateien hoch und konfigurieren sie

• Erweiterte Optionen einschließlich Plattencover, mobile Anzeige und Countdown-Integration

• Styling- und Positionierungsoptionen für verschiedene Geräte

---

📂 Zugriff auf die Einstellungen des Musikplayers

1. Gehen Sie in Ihrem Shopify-Administrationsbereich zu Online-Shop > Designs

2. Klicken Sie Passen Sie neben Ihrem aktiven Plain Jane-Theme

3. Öffne im Theme-Editor das Theme-Einstellungen Panel (Pinsel-Symbol)

4. Wählen Sie Musikplayer im Menü

---

🎧 Grundkonfiguration

Musikplayer aktivieren

• Musikplayer anzeigen: Umschalter zum Aktivieren des Musikplayers auf dem Desktop

• Musikplayer auf Mobilgeräten anzeigen: Optionale Steuerung der mobilen Anzeige

• Countdown-Musik: Integration mit Countdown-Funktionen der Passwortseite

Einrichtung der Audiodatei

• Musik-URL: Laden Sie Ihre Audiodatei hoch (unterstützte Formate: MP3, WAV oder OGG)

• Audio-Preload: Lädt automatisch Metadaten vor für schnellere Wiedergabe

• Autoplay: Musik beginnt beim Laden der Seite zu spielen (abhängig von Browser-Richtlinien)

💡 Hinweis: Moderne Browser blockieren Autoplay mit Ton oft bis zu einer Benutzerinteraktion.

---

🎨 Visuelle Anpassung

Plattenbild-Anzeige

• Platte anzeigen: Umschalter zur Anzeige einer rotierenden Schallplatten-/Vinyl-Optik

• Plattencover-Bild: Laden Sie benutzerdefinierte Albumgrafiken hoch (empfohlen: mindestens 200×200 px)

• Plattenrotation: Animierter Dreh-Effekt, wenn Musik abgespielt wird

Player-Steuerelemente

• Farbe der Musikplayer-Taste: Passen Sie die Farbe der Play/Pause-Schaltfläche an

• Play-Taste: Große, gut zugängliche Wiedergabesteuerung

• Fortschrittsbalken: Visuelle Anzeige des Wiedergabefortschritts

• Navigationssteuerung: Wiedergabe/Pause-Funktionalität

---

📱 Mobiloptimierung

Optionen für mobile Anzeige

• Musikplayer auf Mobilgeräten anzeigen: Steuern Sie die Mobilansicht separat

• Ausrichtung der mobilen Wiedergabe: Automatische Ausrichtungsanpassung, wenn die Platte ausgeblendet ist

• Responsives Design: Der Player passt sich verschiedenen Bildschirmgrößen an

Mobil-spezifische Funktionen

• Touch-freundliche Steuerung: Optimierte Schaltflächengrößen für Mobilgeräte

• Bandbreitenüberlegung: Option, auf Mobilgeräten zu deaktivieren, um Daten zu sparen

• Leistungsoptimierung: Leichtere Mobil-Erfahrung

---

🎵 Erweiterte Funktionen

Anzeige von Songinformationen

• Aktueller Titel: Wird in der Songleiste angezeigt

• Track-Titel: Anpassbare Titelinformationen

• Fortschrittsverfolgung: Echtzeit-Wiedergabefortschritt

Integrationsoptionen

• Integration der Passwortseite: Musik kann während Countdown-Timern abgespielt werden

• Themensynchronisation: Koordiniert sich mit allgemeinen Themenanimationen

• Seitenübergreifende Kontinuität: Musik spielt weiter, während Nutzer navigieren (falls konfiguriert)

---

⚙️ Technische Konfiguration

Audio-Einstellungen

• Metadaten vorladen: Schnellere anfängliche Ladezeiten

• Audio-Element: HTML5-Audio mit Fallback-Unterstützung

• Unterstützte Dateiformate: MP3 (empfohlen), WAV, OGG

• Browserkompatibilität: Funktioniert in allen modernen Browsern

Performance-Überlegungen

• Dateigröße: Halten Sie Audiodateien unter 5 MB für optimale Leistung

• Lade-Strategie: Metadaten-Vorladen für ein Gleichgewicht zwischen Geschwindigkeit und Funktionalität

• Mobile Daten: Berücksichtigen Sie den Datenverbrauch mobiler Nutzer

---

🎯 Beste Praktiken

Vorbereitung der Audiodatei

• Format: Verwenden Sie MP3 für beste Kompatibilität und ausgewogenes Dateigrößenverhältnis

• Qualität: 128–256 kbps bieten gute Qualität bei vernünftiger Dateigröße

• Länge: Erwägen Sie kürzere Schleifen oder Ambient-Tracks für Hintergrundmusik

• Lautstärke: Normalisieren Sie die Pegel, um überraschende Lautstärkeänderungen zu vermeiden

Benutzererlebnis

• Subtile Umsetzung: Hintergrundmusik sollte unterstützen, nicht ablenken

• Benutzerkontrolle: Stellen Sie stets klare Play/Pause-Steuerelemente bereit

• Mobile Überlegung: Testen Sie auf mobilen Geräten mit begrenzter Bandbreite

• Barrierefreiheit: Stellen Sie sicher, dass die Steuerelemente per Tastatur zugänglich sind

---

🔧 Fehlerbehebung

Häufige Probleme

Musik wird nicht automatisch abgespielt

• Moderne Browser verlangen eine Benutzerinteraktion, bevor Audio abgespielt wird

Mobile Leistung

• Große Audiodateien können die Leistung auf Mobilgeräten beeinträchtigen

• Erwägen Sie, die Wiedergabe auf Mobilgeräten für datenempfindliche Nutzer zu deaktivieren

• Testen Sie auf echten Mobilgeräten, nicht nur mit den Dev-Tools des Browsers

Probleme beim Laden von Dateien

• Stellen Sie sicher, dass die URL der Audiodatei zugänglich ist

• Prüfen Sie die Kompatibilität des Dateiformats

• Stellen Sie sicher, dass die Dateigröße nicht zu groß ist

Browser-Unterstützung

• Chrome/Edge: Volle Unterstützung für alle Funktionen

• Safari: Möglicherweise strengere Autoplay-Richtlinien

• Firefox: Gute Unterstützung mit Standardkonfigurationen

• Mobile Browser: Variiert je nach Gerät und Browser

---