Den Audioplayer anpassen

6 min read

Der Audioplayer ist das, was deine Besucher sehen und anklicken. Du kannst seine Farben, seine Position auf der Seite, seine Größe und die angezeigten Steuerelemente ändern. Zeige deine Änderungen live in der Vorschau an, bevor du speicherst.

Die Player-Einstellungsseite öffnen

Gehe zu Text-zu-Sprache → Player. Die Seite ist in fünf Bereiche gegliedert:

  1. Platzierung
  2. Farben
  3. Fortschrittsbalken-Stil
  4. Angezeigte Steuerelemente
  5. Live-Vorschau

Jede Änderung, die du vornimmst, aktualisiert die Vorschau am unteren Rand der Seite.

Platzierung

Wo der Player in deinen Beiträgen erscheint. Wähle eine Option:

  • Vor dem Titel: oberhalb des Beitragstitels
  • Nach dem Titel: zwischen Titel und erstem Absatz
  • Nach dem Inhalt: am Ende des Beitrags (Standard)
  • Vor dem Auszug: wird nur in Archiv- oder Blog-Listenansichten angezeigt
  • Nach dem Auszug: wird nach Beitragszusammenfassungen in Archiven angezeigt
  • Sticky Footer (PRO): am unteren Seitenrand fixiert, während der Besucher scrollt

Für die meisten Blogs funktioniert Nach dem Titel oder Nach dem Inhalt am besten. Siehe Sticky-Footer-Player für die fixierte Leisten-Option.

Farben

Drei Farbwähler steuern das Aussehen des Players:

  • Hintergrund: die Oberflächenfarbe des Players
  • Text: Farbe von Titel und Zeitanzeige
  • Akzent / Wiedergabe: der Wiedergabe-Button, der Fortschrittsfüllstand und aktive Icons

Wähle Farben, die zu deinem Theme passen. Die Vorschau wird in Echtzeit aktualisiert.

Tipp: Wenn du CSS-Variablen in deinem Theme verwendest, kannst du diese Farben mit eigenem CSS überschreiben. Siehe Benutzerdefiniertes CSS.

Fortschrittsbalken-Stil

Zwei Optionen:

  • Linear: ein standardmäßiger horizontaler Fortschrittsbalken (Standard)
  • Wellenform (PRO): eine visuelle Wellenform, bei der jeder Beitrag ein einzigartiges Muster erhält

Die Wellenform verleiht jedem Beitrag Charakter und sieht bei Podcast-ähnlichen Inhalten großartig aus. Sie basiert auf SVG und fügt kein nennenswertes Seitengewicht hinzu. Siehe Wellenform-Fortschrittsbalken.

Angezeigte Steuerelemente

Jedes Steuerelement ist ein einfacher Ein-/Aus-Schalter. Schalte sie ein, wenn du sie sichtbar haben möchtest, und aus, wenn du ein aufgeräumteres Aussehen bevorzugst.

  • Wiedergabe / Pause: immer aktiv (kann nicht deaktiviert werden)
  • Aktuelle Zeit und Dauer
  • Wiedergabegeschwindigkeit (0,5x, 1x, 1,25x, 1,5x, 2x)
  • Lautstärke
  • Herunterladen
  • Wiederholen
  • Informations-Symbol (zeigt den Stimmnamen und die Sprache)

Für die Barrierefreiheit empfehlen wir, Zeitanzeige, Geschwindigkeit und Herunterladen aktiviert zu lassen.

Live-Vorschau

Am unteren Rand der Seite siehst du genau, was deine Besucher sehen werden. Ein kurzer Textausschnitt wird abgespielt, wenn du klickst. Die Vorschau wird bei jeder Änderung aktualisiert.

Klicke auf Änderungen speichern in der oberen Leiste, wenn du zufrieden bist. Änderungen werden sofort auf alle Beiträge mit Audio angewendet.

Verhalten auf Mobilgeräten

Der Player ist responsiv und passt sich kleineren Bildschirmen an:

  • Unter 480px: Herunterladen- und Informations-Steuerelemente werden in einem Menü zusammengefasst
  • Unter 320px: Wiederholen- und Geschwindigkeits-Steuerelemente werden vollständig ausgeblendet, nur Wiedergabe und Zeit bleiben sichtbar

Dynamisches CSS-Caching

Deine Farbauswahl wird 12 Stunden lang im Cache gespeichert, damit das CSS nicht bei jedem Seitenaufruf neu generiert werden muss. Wenn du Änderungen speicherst, wird der Cache automatisch geleert. Wenn du alte Farben siehst, lade die Seite mit einem Hard-Refresh neu (Strg+Umschalt+R).

Verwandte Seiten