API JavaScript

Se integri Lexora via JavaScript, ottieni un'istanza Lexora che puoi controllare via codice: avviare o interrompere la riproduzione, mettere in pausa o riprendere, ricaricare l’audio, eseguire seek e aggiornare le impostazioni dell’interfaccia in tempo reale.

Creare un'istanza Lexora

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

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

Suggerimento: conserva un riferimento all’istanza (lexora) così da poter richiamare i metodi in seguito, ad esempio da pulsanti personalizzati o controlli UI esterni.

Metodi di riproduzione

Alternare play / pausa / ripresa

Questo è il principale metodo “toggle” utilizzato internamente dall’interfaccia del player. Si comporta come un interruttore:

  • Se il player è inattivo → avvia la riproduzione
  • Se è in riproduzione → mette in pausa
  • Se è in pausa → riprende
// Toggle playback
lexora.playEvent();

Avviare la riproduzione

Avvia esplicitamente la riproduzione. Se l’audio non è ancora stato caricato, verrà prima recuperato e preparato.

await lexora.startPlayback();

Mettere in pausa

Mette in pausa la riproduzione mantenendo la posizione corrente.

lexora.pause();

Riprendere la riproduzione

Riprende la riproduzione dalla posizione corrente.

lexora.resume();

Interrompere la riproduzione

Interrompe la riproduzione e riporta l’avanzamento all’inizio (00:00).

lexora.stop();

Metodi di ricarica

Ricaricare l’audio

Forza il player a ricaricare la risorsa audio corrente (stesso ID audio), reimpostando stato interno e interfaccia, con possibilitĂ  opzionale di autoplay.

  • autoplay (booleano): se true, avvia la riproduzione dopo il ricaricamento
  • preload (booleano): se true, precarica i dati audio senza avviare la riproduzione
// Reload audio and keep it ready (no autoplay)
await lexora.reloadAudioOnly({ preload: true, autoplay: false });

// Reload audio and autoplay (note: autoplay behavior may vary by browser policies)
await lexora.reloadAudioOnly({ preload: true, autoplay: true });

Casi d’uso comuni:

  • L’audio è stato rigenerato lato server.
  • Vuoi assicurarti che venga caricata la versione piĂą recente.
  • Hai bisogno di un reset pulito senza ricreare l’istanza del player.

Metodi di seek

Seek in percentuale

Sposta la riproduzione a una percentuale della durata totale (0–100).

// Jump to the middle
lexora.seekToPercent(50);

Seek in millisecondi

Sposta la riproduzione a una posizione assoluta espressa in millisecondi.

// Jump to 30 seconds
lexora.seekToGlobalMs(30000);

Ottenere la posizione corrente

Restituisce la posizione corrente di riproduzione in millisecondi.

const ms = lexora.getGlobalCurrentTimeMs();
console.log('Current position:', ms);

Personalizzazione a runtime

Aggiornare la configurazione del player

Aggiorna le impostazioni dell’istanza durante l’esecuzione. Questo è il metodo consigliato per modificare colori del tema, etichette, icone e opzioni funzionali (mini player sticky / velocità di riproduzione) senza ricreare il player.

Firma

lexora.update(nextOptions, opts);

Esempio: aggiornare il tema

lexora.update({
  style: {
    primary: '#7CD259',
    background: '#0C120D',
    foreground: '#FFFFFF',
    'widget-btn-background': '#7CD259',
    'widget-btn-foreground': '#0C120D'
  }
});

Esempio: aggiornare le etichette

lexora.update({
  labels: {
    play: 'Play',
    stop: 'Stop',
    resume: 'Resume',
    pause: 'Pause',
    speed: 'Playback speed',
    close: 'Close',
    init: 'Press play to listen',
    loading: 'Loading speech...'
  }
});

Esempio: attivare o disattivare funzionalitĂ 

// Enable sticky mini player
lexora.update({ stickyplayer: true });

// Enable playback speed button (auto-disabled on iOS)
lexora.update({ playspeed: true });

Nella maggior parte delle integrazioni non avrai bisogno del parametro opzionale opts.

Lettura dello stato del player

Un’istanza Lexora espone valori di stato utili che puoi leggere per costruire logiche UI personalizzate.

  • lexora.isPlaying (booleano)
  • lexora.isPaused (booleano)
  • lexora.audioLoaded (booleano)
  • lexora.currentSpeed (numero: 1, 1.5, 2)
  • lexora.totalDurationMs (numero)
if (lexora.isPlaying) {
  console.log('Audio is playing');
}

if (lexora.isPaused) {
  console.log('Audio is paused');
}

Callback onReady

Puoi passare una callback onReady nelle opzioni del costruttore per eseguire codice quando il player è inizializzato e pronto.

const lexora = new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]',
  onReady(instance) {
    console.log('Lexora ready:', instance);
  }
});

Best practice

  • Usa playEvent() se vuoi un singolo controllo toggle, come nell’interfaccia integrata.
  • Usa startPlayback() per azioni esplicite del tipo “riproduci ora”.
  • Usa update() per modifiche a runtime di tema, lingua o configurazione.
  • Usa seekToPercent() per controlli di avanzamento semplici e seekToGlobalMs() per uno spostamento preciso.