El Reproductor de audio de Lexora es la capa de reproducción dentro del ecosistema Lexora. Mientras el motor de síntesis de voz genera audio con IA a partir de texto, el reproductor se encarga de reproducir, controlar y distribuir ese audio en tu sitio web.
Es ligero, fácil de integrar, responsivo y está diseñado para separar generación y reproducción.
Arquitectura
Lexora sigue una arquitectura modular:
- El texto se convierte en audio mediante el motor de síntesis de voz.
- Se genera un ID de audio único.
- El reproductor utiliza ese ID para recuperar y reproducir el audio.
Esta separación permite:
- No regenerar audio para reproducirlo.
- No consumir créditos adicionales al hacer embed.
- Escalar fácilmente la distribución en múltiples páginas.
Métodos de integración
Primero, debes incluir la librería de Lexora en tu <head> o <body>.
<script src="https://lexora.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>Después, puedes integrar el reproductor de dos formas:
1) Integración mediante markup (automática)
El método más sencillo utiliza el elemento personalizado:
<lexora data-speech="[YOUR_SPEECH_ID]"></lexora> El atributo data-speech debe contener el ID generado por el motor de voz.
Al cargar el script:
- Todos los elementos
<lexora>se inicializan automáticamente. - Se recupera la sesión de audio.
- Se renderiza el reproductor.
Este método hereda automáticamente el estilo y configuración definidos en tu panel de Lexora.
2) Inicialización con JavaScript (control avanzado)
Para un mayor control, puedes inicializar el reproductor manualmente:
const target = document.querySelector('#lexora-target');
new Lexora(target, {
speech: '[YOUR_SPEECH_ID]'
});Este método permite personalizar en tiempo real:
- Tema (colores)
- Etiquetas (texto UI)
- Iconos (SVG personalizados)
- Comportamiento del mini player flotante
- Control de velocidad de reproducción
Flujo de reproducción
Cuando se crea una instancia del reproductor, Lexora:
- Solicita el audio usando su ID.
- Precarga metadatos y duración.
- Muestra un mensaje inicial (por ejemplo, “Pulsa reproducir para escuchar”).
- Carga el audio completo al iniciar la reproducción.
Estados del reproductor:
- Inactivo
- Cargando
- Reproduciendo
- Pausado
- Detenido
Mini reproductor fijo (sticky)
Si está activado, Lexora muestra automáticamente un mini reproductor fijo cuando el reproductor principal sale del viewport.
- Solo aparece durante la reproducción.
- Se oculta automáticamente al detener el audio.
- Comparte el mismo estilo y comportamiento.
Esto permite mantener el control de reproducción en páginas largas.
Velocidad de reproducción
El reproductor permite cambiar la velocidad entre:
- 1x
- 1,5x
- 2x
Nota: en dispositivos iOS, los controles de velocidad se desactivan automáticamente debido a limitaciones de WebKit.
Shadow DOM y diseño responsivo
El reproductor utiliza Shadow DOM para aislar su estructura. Esto garantiza:
- Sin conflictos CSS con tu sitio.
- Estilos encapsulados y consistentes.
- Integración segura en cualquier CMS o framework.
El reproductor es totalmente responsivo y se adapta a móvil, tablet y desktop.
Escalabilidad y rendimiento
- El audio se genera una sola vez y se reutiliza.
- El embed no consume créditos adicionales.
- El script detecta automáticamente reproductores añadidos dinámicamente.
- Estrategia de carga optimizada para alto rendimiento.