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 eseekToGlobalMs()per uno spostamento preciso.