Dostosuj odtwarzacz audio

6 min read

Odtwarzacz audio to element, który odwiedzający widzą i klikają. Możesz zmienić jego kolory, pozycję na stronie, rozmiar oraz wyświetlane elementy sterowania. Podglądaj zmiany na żywo przed zapisaniem.

Otwórz stronę ustawień odtwarzacza

Przejdź do Tekst na mowę - TTSWP → Odtwarzacz. Strona jest podzielona na pięć sekcji:

  1. Umiejscowienie
  2. Kolory
  3. Styl paska postępu
  4. Wyświetlane elementy sterowania
  5. Podgląd na żywo

Każda wprowadzona zmiana aktualizuje podgląd na dole strony.

Umiejscowienie

Miejsce wyświetlania odtwarzacza we wpisach. Wybierz jedną opcję:

  • Przed tytułem: powyżej tytułu wpisu
  • Po tytule: między tytułem a pierwszym akapitem
  • Po treści: na końcu wpisu (domyślnie)
  • Przed fragmentem: widoczne tylko w widokach archiwum lub listy wpisów
  • Po fragmencie: wyświetlane po podsumowaniach wpisów w archiwach
  • Przyklejona stopka (PRO): przypięta do dołu strony podczas przewijania przez odwiedzającego

W przypadku większości blogów najlepiej sprawdza się opcja Po tytule lub Po treści. Zobacz Przyklejona stopka odtwarzacza, aby poznać opcję przypiętego paska.

Kolory

Trzy selektory kolorów kontrolują wygląd odtwarzacza:

  • Tło: kolor powierzchni odtwarzacza
  • Tekst: kolor tytułu i wyświetlacza czasu
  • Akcent / Odtwórz: przycisk odtwarzania, wypełnienie postępu i aktywne ikony

Wybierz kolory pasujące do Twojego motywu. Podgląd aktualizuje się w czasie rzeczywistym.

Wskazówka: Jeśli używasz zmiennych CSS w swoim motywie, możesz nadpisać te kolory niestandardowym CSS. Zobacz Niestandardowy CSS.

Styl paska postępu

Dwie opcje:

  • Liniowy: standardowy poziomy pasek postępu (domyślnie)
  • Waveform (PRO): wizualny kształt fali, gdzie każdy wpis otrzymuje unikalny wzór

Waveform dodaje charakter każdemu wpisowi i świetnie wygląda w przypadku treści w stylu podcastów. Jest oparty na SVG i nie zwiększa znacząco wagi strony. Zobacz Pasek postępu Waveform.

Wyświetlane elementy sterowania

Każdy element sterowania to prosty przełącznik włącz/wyłącz. Włączaj je, gdy chcesz, żeby były widoczne, wyłączaj, gdy preferujesz czystszy wygląd.

  • Odtwórz / pauza: zawsze włączony (nie można wyłączyć)
  • Aktualny czas i czas trwania
  • Prędkość odtwarzania (0,5x, 1x, 1,25x, 1,5x, 2x)
  • Głośność
  • Pobierz
  • Pętla
  • Ikona informacji (pokazuje nazwę głosu i język)

Dla dostępności zalecamy pozostawienie włączonych opcji Wyświetlacz czasu, Prędkość i Pobierz.

Podgląd na żywo

Dolna część strony pokazuje dokładnie to, co zobaczą Twoi odwiedzający. Po kliknięciu odtwarzany jest krótki przykładowy tekst. Podgląd aktualizuje się przy każdej wprowadzonej zmianie.

Kliknij Zapisz zmiany na górnym pasku, gdy jesteś zadowolony. Zmiany są natychmiast stosowane do każdego wpisu z dźwiękiem.

Zachowanie na urządzeniach mobilnych

Odtwarzacz jest responsywny i dostosowuje się do mniejszych ekranów:

  • Poniżej 480px: elementy sterowania Pobierz i Informacje zwijają się do menu
  • Poniżej 320px: elementy sterowania Pętla i Prędkość są całkowicie ukryte, pozostają tylko Odtwórz i Czas

Buforowanie dynamicznego CSS

Twoje wybory kolorów są buforowane przez 12 godzin, aby uniknąć ponownego generowania CSS przy każdym wczytaniu strony. Po zapisaniu zmian pamięć podręczna jest automatycznie czyszczona. Jeśli nadal widzisz stare kolory, odśwież stronę twardym odświeżeniem (Ctrl+Shift+R).

Powiązane strony