Wellenform-Fortschrittsanzeige

2 min read

Eine visuelle Wellenform ersetzt die Standard-Fortschrittsanzeige. Jeder Beitrag bekommt ein einzigartiges Muster, sodass jeder Player anders aussieht. Pro- und Agency-Plan.

Aktivierung

  1. Gehe zu Text-zu-Sprache → Player.
  2. Wähle unter Fortschrittsanzeige-Stil die Option Wellenform.
  3. Speichern.

Jeder Audio-Player auf deiner Website verwendet jetzt die Wellenform.

Warum jeder Beitrag ein einzigartiges Muster bekommt

Die Wellenform wird aus einem Seed generiert, der aus der Beitrags-ID abgeleitet wird. Das bedeutet:

  • Jeder Beitrag hat eine visuell andere Wellenform
  • Derselbe Beitrag zeigt immer dieselbe Wellenform
  • Die Wellenform stellt nicht das tatsächliche Audio dar (es ist ein deterministisches visuelles Muster)

Das sieht deutlich besser aus als eine statische Leiste und fügt null Dateigröße hinzu - die Wellenform ist ein eingebettetes SVG mit 60 Balken.

Klicken und ziehen zum Navigieren

Die Wellenform ist interaktiv:

  • Klicke irgendwo darauf, um zu dieser Position zu springen
  • Klicke und ziehe den Positionsindikator, um durch das Audio zu scrubben
  • Funktioniert auf Desktop- und Touch-Geräten

Farben

Die Wellenform verwendet zwei Farben aus deinen Player-Einstellungen:

  • Standard-Fortschrittsfarbe - nicht abgespielte Balken
  • Wiedergabe-Fortschrittsfarbe - Balken hinter dem Abspielkopf

Andere sie unter Text-zu-Sprache → Player → Farben.

Performance

  • Die Wellenform ist ein einzelnes eingebettetes SVG (ca. 2 KB pro Player)
  • Kein zusätzliches JavaScript über das hinaus, was der Player bereits lädt
  • Beeinflusst die Core Web Vitals nicht

Fallback für Gratis-Nutzer

Nutzer des Gratis-Plans sehen die lineare Fortschrittsanzeige, auch wenn Wellenform ausgewählt ist - es ist eine PRO-Funktion.

Verwandte Seiten