Pasek postępu z falą dźwiękową

2 min read

Wizualna fala dźwiękowa zastępuje standardowy liniowy pasek postępu. Każdy wpis otrzymuje unikalny wzór, dzięki czemu każdy odtwarzacz wygląda inaczej. Plany Pro i Agency.

Jak to włączyć

  1. Przejdź do Tekst na Mowę → Odtwarzacz.
  2. W sekcji Styl paska postępu wybierz Fala dźwiękowa.
  3. Zapisz.

Wszystkie odtwarzacze audio na Twojej stronie będą teraz używać fali dźwiękowej.

Dlaczego każdy wpis ma unikalny wzór

Fala dźwiękowa jest generowana na podstawie ziarna wyznaczonego z ID wpisu. Oznacza to, że:

  • Każdy wpis ma wizualnie inną falę dźwiękową
  • Ten sam wpis zawsze wyświetla tę samą falę dźwiękową
  • Fala dźwiękowa nie reprezentuje rzeczywistego audio (to deterministyczny wzór wizualny)

Wygląda to znacznie lepiej niż statyczny pasek, a rozmiar pliku pozostaje niezmieniony - fala dźwiękowa to wbudowany SVG z 60 słupkami.

Kliknij i przeciągnij, aby przewijać

Fala dźwiękowa jest interaktywna:

  • Kliknij w dowolnym miejscu, aby przejść do wybranej pozycji
  • Kliknij i przeciągnij wskaźnik pozycji, aby przewijać audio
  • Działa na komputerach stacjonarnych i urządzeniach dotykowych

Kolory

Fala dźwiękowa używa dwóch kolorów z ustawień Odtwarzacza:

  • Domyślny kolor postępu - słupki przed pozycją odtwarzania
  • Kolor podczas odtwarzania - słupki za głowicą odtwarzania

Zmień je w Tekst na Mowę → Odtwarzacz → Kolory.

Wydajność

  • Fala dźwiękowa to pojedynczy wbudowany SVG (ok. 2 KB na odtwarzacz)
  • Brak dodatkowego JavaScript poza tym, co odtwarzacz już ładuje
  • Nie wpływa na Core Web Vitals

Opcja zastępcza dla użytkowników bezpłatnych

Użytkownicy planu bezpłatnego widzą liniowy pasek postępu, nawet jeśli wybrano falę dźwiękową - to funkcja PRO.

Powiązane strony