Personalizzazione del player

Metodi di integrazione

Inizia installando la libreria Lexora sul tuo sito web. Una volta completata l’installazione, puoi integrare il player audio utilizzando uno dei seguenti approcci:

1) Embed via markup

Questo è il metodo di integrazione più semplice. Il player si inizializza automaticamente e applica le impostazioni già configurate nel tuo progetto Lexora.

<lexora data-speech="[YOUR_SPEECH_ID]"></lexora>

Usa questo metodo quando vuoi mantenere stile e comportamento coerenti su più pagine senza scrivere JavaScript personalizzato.

2) Inizializzazione via JavaScript

Usa JavaScript quando hai bisogno di un controllo più avanzato sul rendering, sugli aggiornamenti a runtime o su comportamenti specifici della pagina.

const target = document.querySelector('#lexora-target');

new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]'
});

Lexora unisce la configurazione che passi via JavaScript con le impostazioni predefinite del player, quindi devi specificare solo le opzioni che vuoi sovrascrivere.

Opzioni JavaScript supportate

Opzioni principali

new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]',
  stickyplayer: true,
  playspeed: true,
  glass: true,
  jumpSeconds: 10
});

Personalizzazione dello stile

L’oggetto style controlla il tema visivo del player. Questi valori vengono applicati internamente come variabili CSS.

Chiavi di stile supportate

new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]',
  style: {
    primary: '#7CD259',
    background: '#0C120D',
    foreground: '#FFFFFF',
    'widget-background': '#0C120D',
    'widget-foreground': '#FFFFFF',
    'widget-btn-background': '#7CD259',
    'widget-btn-foreground': '#0C120D',
    'seek-background': '#FFFFFF',
    'seek-fill': '#7CD259',
    'seek-thumb': '#FFFFFF',
    visualizer: '#7CD259'
  }
});

Se imposti solo primary, background e foreground, Lexora ricaverà automaticamente gli altri colori dell’interfaccia usando le regole di fallback predefinite.

Per garantire l’accessibilità, mantieni sempre un buon contrasto tra sfondo e primo piano.

Personalizzazione delle etichette

L’oggetto labels ti permette di sovrascrivere i testi del player. È utile per localizzazione, tono del prodotto o adattamenti specifici dell’interfaccia.

L’etichetta loading viene utilizzata negli stati di caricamento standard. L’etichetta generating viene utilizzata in modalità automatica mentre l’audio viene generato progressivamente. Le etichette jumpForward e jumpBack vengono usate automaticamente su iOS e Safari, dove i controlli della velocità di riproduzione vengono sostituiti da controlli di salto.

Chiavi etichetta supportate

new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]',
  labels: {
    play: 'Play',
    stop: 'Stop',
    resume: 'Resume',
    pause: 'Pause',
    speed: 'Playback speed',
    close: 'Close',
    init: 'Press play to listen',
    loading: 'Loading speech...',
    generating: 'Generating speech...',
    jumpBack: 'Skip backward',
    jumpForward: 'Skip forward'
  }
});

Personalizzazione delle icone

Puoi sostituire i controlli predefiniti passando stringhe SVG inline tramite l’oggetto icons.

Consigliato: usa fill="currentColor" o stroke="currentColor" in modo che le icone ereditino correttamente i colori del tema.

Chiavi icona supportate

new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]',
  icons: {
    play: '<svg>...</svg>',
    pause: '<svg>...</svg>',
    stop: '<svg>...</svg>'
  }
});

Comportamento del mini player sticky

Quando stickyplayer è abilitato, Lexora mostra un mini player compatto quando il player principale esce dalla viewport.

• Compare solo mentre la riproduzione è attiva o in pausa.
• Si nasconde automaticamente quando la riproduzione termina o viene interrotta.
• Eredita la stessa configurazione visiva del player principale.

new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]',
  stickyplayer: true
});

Velocità di riproduzione

Quando abilitato, il controllo della velocità scorre ciclicamente tra 1x, 1.5x e 2x.

Su iOS e Safari, i controlli della velocità di riproduzione non sono disponibili. In questi casi, Lexora sostituisce automaticamente il controllo della velocità con i comandi di salto indietro e salto in avanti.

new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]',
  playspeed: true,
  jumpSeconds: 15
});

Opzioni della modalità automatica

La modalità automatica consente a Lexora di estrarre testo leggibile direttamente dalla pagina e generare l’audio su richiesta.

Opzioni supportate per la modalità automatica

new Lexora(target, {
  mode: 'auto',
  contentTarget: '.article-body',
  language: 'en-US',
  voice: 'Aria',
  stickyplayer: true,
  style: {
    primary: '#7CD259',
    background: '#0C120D',
    foreground: '#FFFFFF'
  }
});

In modalità automatica, le opzioni passate via JavaScript hanno priorità sulle impostazioni predefinite del progetto.

Utilizzo consigliato

• Usa l’embed via markup quando vuoi una configurazione centralizzata gestita dalla dashboard Lexora.
• Usa l’integrazione via JavaScript quando hai bisogno di controllo dinamico, interfacce personalizzate o aggiornamenti a runtime.
• Usa etichette personalizzate per mantenere il player coerente con il tono del prodotto e la lingua dell’interfaccia.
• Usa solo i tre colori base quando vuoi che Lexora derivi automaticamente il resto dell’interfaccia.
• Usa la mappa completa di style quando hai bisogno di un controllo dettagliato su pulsanti, barra di avanzamento e visualizzatore.