Il player audio Lexora rappresenta il livello di riproduzione dell’ecosistema Lexora. Mentre il motore di sintesi vocale genera audio AI a partire dal testo, il player è responsabile della riproduzione, del controllo e della distribuzione dell’audio sul tuo sito web.
È leggero, facilmente integrabile, reattivo e progettato per separare chiaramente generazione e riproduzione.
Panoramica dell’architettura
Lexora adotta un’architettura modulare:
- Il testo viene convertito in audio tramite il motore di sintesi vocale Lexora.
- Viene generato un ID audio univoco.
- Il player utilizza questo ID per recuperare e riprodurre la sessione audio.
Questa separazione garantisce:
- Nessuna rigenerazione necessaria durante la riproduzione.
- Nessun consumo aggiuntivo di crediti durante l’embed.
- Distribuzione scalabile su più pagine.
Metodi di integrazione
Per prima cosa, devi integrare la libreria Lexora all’interno del tuo <head> o della sezione <body>.
<script src="https://lexora.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>Successivamente, puoi integrare il player in due modi diversi.
1) Embed tramite markup (inizializzazione automatica)
Il metodo più semplice utilizza l’elemento personalizzato:
<lexora data-speech="[YOUR_SPEECH_ID]"></lexora> L’attributo data-speech deve contenere l’ID audio generato dallo Speech Core.
Quando lo script viene caricato:
- Tutti gli elementi
<lexora>vengono inizializzati automaticamente. - La sessione audio viene recuperata.
- Viene visualizzata l’interfaccia del player.
Questo metodo eredita automaticamente stile e configurazioni definite nella dashboard Lexora.
2) Inizializzazione via JavaScript (controllo programmatico)
Per un controllo più avanzato, puoi inizializzare manualmente il player:
const target = document.querySelector('#lexora-target');
new Lexora(target, {
speech: '[YOUR_SPEECH_ID]'
});Questo metodo consente di personalizzare dinamicamente:
- Tema (colori)
- Etichette (testi dell’interfaccia)
- Icone (sostituzione SVG)
- Comportamento del mini player flottante
- Velocità di riproduzione
Flusso di riproduzione
Quando viene creata un’istanza del player, Lexora:
- Richiede la sessione audio tramite l’ID.
- Precarica i metadati e la durata dell’audio.
- Mostra un messaggio iniziale (es. "Premi play per ascoltare").
- Carica lo stream audio completo all’avvio della riproduzione.
Gli stati di riproduzione includono:
- Idle
- Caricamento
- In riproduzione
- In pausa
- Terminato
Mini player sticky
Se abilitato, Lexora genera automaticamente un mini player fisso che appare quando il player principale esce dalla viewport.
- Visibile solo durante la riproduzione attiva.
- Si nasconde automaticamente quando la riproduzione si interrompe.
- Mantiene lo stesso tema e comportamento del player principale.
Questo garantisce accesso continuo ai controlli anche su pagine lunghe.
Velocità di riproduzione
Il player supporta diverse velocità di riproduzione:
- 1x
- 1.5x
- 2x
Nota: i controlli di velocità vengono automaticamente disabilitati su dispositivi iOS a causa delle limitazioni di WebKit.
Shadow DOM e design responsive
Il player audio utilizza l’isolamento tramite Shadow DOM. Questo garantisce:
- Nessun conflitto CSS con il tuo sito.
- Stili isolati per un rendering coerente.
- Integrazione sicura in qualsiasi CMS o framework.
Il player è completamente responsive e si adatta a mobile, tablet e desktop.
Scalabilità e performance
- L’audio viene generato una sola volta e riutilizzato ovunque.
- L’integrazione non consuma crediti aggiuntivi.
- Lo script inizializza automaticamente i player aggiunti dinamicamente.
- Caricamento leggero e ottimizzato per le performance.