Le lecteur audio Lexora est la couche de lecture de l’écosystème Lexora. Là où Speech Core génère l’audio à partir du texte, le lecteur se charge d’afficher, contrôler et diffuser cet audio sur votre site.
Il est léger, intégrable, responsive et pensé pour bien séparer la génération de la lecture.
Vue d’ensemble de l’architecture
Lexora suit une architecture modulaire :
- Le texte est converti en audio via Speech Core.
- Une clé audio unique (Audio ID) est générée.
- Le lecteur utilise cette clé pour récupérer et afficher la session audio.
Cette séparation permet :
- de ne pas régénérer l’audio à chaque lecture ;
- de ne pas consommer de crédits supplémentaires lors de l’intégration ;
- de distribuer le même audio sur plusieurs pages.
Méthodes d’intégration
Commencez par intégrer la bibliothèque Lexora dans votre <head> ou votre <body>.
<script src="https://lexora.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>Ensuite, vous pouvez intégrer le lecteur de deux manières.
1) Intégration markup (initialisation automatique)
La méthode la plus simple consiste à utiliser l’élément personnalisé :
<lexora data-speech="[YOUR_SPEECH_ID]"></lexora>L’attribut data-speech doit contenir la clé audio générée par Speech Core.
Au chargement du script :
- tous les éléments
<lexora>sont initialisés automatiquement ; - la session audio est récupérée ;
- l’interface du widget est rendue.
Cette méthode reprend automatiquement les réglages définis dans votre dashboard Lexora.
2) Initialisation JavaScript (contrôle programmatique)
Si vous avez besoin de plus de contrôle, vous pouvez instancier le lecteur manuellement :
const target = document.querySelector('#lexora-target');
new Lexora(target, {
speech: '[YOUR_SPEECH_ID]'
});Cette méthode permet notamment de personnaliser à l’exécution :
- le thème (couleurs) ;
- les labels ;
- les icônes ;
- le comportement du sticky player ;
- la vitesse de lecture.
Cycle de lecture
Quand une instance du lecteur est créée, Lexora :
- demande une session audio à partir de la clé ;
- précharge les métadonnées et la durée ;
- affiche un message d’initialisation (par exemple « Appuyez sur lecture pour écouter ») ;
- charge le flux audio complet au moment où la lecture démarre.
Les états principaux sont :
- Idle
- Loading
- Playing
- Paused
- Stopped
Sticky player
Quand il est activé, Lexora affiche automatiquement un mini-lecteur fixe lorsque le widget principal sort de l’écran.
- Visible uniquement pendant une lecture active ;
- masqué automatiquement quand l’audio s’arrête ;
- reprend le même thème et le même comportement.
Cela permet de garder les contrôles accessibles sur les pages longues.
Vitesse de lecture
Le lecteur permet de basculer entre :
- 1x
- 1,5x
- 2x
Note : les contrôles de vitesse sont automatiquement désactivés sur iOS à cause des limites de WebKit.
Responsive et Shadow DOM
Le lecteur s’appuie sur l’isolation Shadow DOM, ce qui garantit :
- l’absence de conflit CSS avec votre site ;
- des styles encapsulés ;
- une intégration sûre dans n’importe quel CMS ou framework.
Le widget s’adapte automatiquement au mobile, à la tablette et au desktop.
Scalabilité et performance
- L’audio est généré une seule fois puis réutilisé partout.
- L’intégration ne consomme pas de crédits supplémentaires.
- Le script initialise aussi les lecteurs ajoutés dynamiquement.
- La stratégie de chargement reste légère pour limiter l’impact sur la page.