Barra di Avanzamento a Forma d'Onda

2 min read

Una forma d'onda visiva sostituisce la barra di avanzamento lineare standard. Ogni articolo riceve un pattern unico, quindi ogni player appare diverso dagli altri. Disponibile nei piani Pro e Agency.

Come attivarla

  1. Vai su Da Testo a Voce - TTSWP → Player.
  2. In Stile barra di avanzamento, seleziona Forma d'onda.
  3. Salva.

Ogni player audio sul tuo sito utilizzerà ora la forma d'onda.

Perche ogni articolo riceve un pattern unico

La forma d'onda viene generata da un seed derivato dall'ID dell'articolo. Questo significa:

  • Ogni articolo ha una forma d'onda visivamente diversa
  • Lo stesso articolo mostra sempre la stessa forma d'onda
  • La forma d'onda non rappresenta l'audio reale (e un pattern visivo deterministico)

Appare molto meglio di una barra statica e non aggiunge peso al file - la forma d'onda e un SVG inline con 60 barre.

Clic e trascinamento per spostarsi

La forma d'onda e interattiva:

  • Fai clic in qualsiasi punto per passare a quella posizione
  • Fai clic e trascina l'indicatore di posizione per scorrere l'audio
  • Funziona su desktop e dispositivi touch

Colori

La forma d'onda utilizza due colori dalle impostazioni del Player:

  • Colore predefinito avanzamento - barre non ancora riprodotte
  • Colore riproduzione avanzamento - barre dietro la testina di riproduzione

Modificali in Da Testo a Voce - TTSWP → Player → Colori.

Prestazioni

  • La forma d'onda e un singolo SVG inline (circa 2 KB per player)
  • Nessun JavaScript aggiuntivo rispetto a quanto gia caricato dal player
  • Non influisce sui Core Web Vitals

Alternativa per gli utenti gratuiti

Gli utenti del piano gratuito vedono la barra di avanzamento lineare anche se e selezionata la Forma d'onda - e una funzione PRO.

Pagine correlate