Personalización del reproductor

Métodos de integración

Empieza instalando la librería de Lexora en tu sitio web. Una vez completada la instalación, puedes integrar el sistema de Text to Speech utilizando uno de los siguientes métodos:

1) Integración mediante markup

Este es el método más sencillo. El reproductor se inicializa automáticamente y aplica la configuración ya definida en tu proyecto de Lexora.

<lexora data-speech="[YOUR_SPEECH_ID]"></lexora>

Usa este método cuando quieras mantener un estilo y un comportamiento consistentes en varias páginas sin escribir JavaScript personalizado.

2) Inicialización con JavaScript

Usa JavaScript cuando necesites más control sobre el renderizado, las actualizaciones en tiempo real o comportamientos específicos de la página.

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

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

Lexora combina tu configuración con la configuración predeterminada del reproductor, por lo que solo necesitas pasar las opciones que quieras sobrescribir.

Opciones JavaScript disponibles

Opciones principales

new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]',
  stickyplayer: true,
  playspeed: true,
  glass: true,
  jumpSeconds: 10
});

Personalización de estilos

El objeto style controla el tema visual del reproductor. Estos valores se aplican internamente como variables CSS.

Claves de estilo disponibles

new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]',
  style: {
    primary: '#7CD259',
    background: '#0C120D',
    foreground: '#FFFFFF',
    'widget-background': '#0C120D',
    'widget-foreground': '#FFFFFF',
    'widget-btn-background': '#7CD259',
    'widget-btn-foreground': '#0C120D',
    'seek-background': '#FFFFFF',
    'seek-fill': '#7CD259',
    'seek-thumb': '#FFFFFF',
    visualizer: '#7CD259'
  }
});

Si solo defines primary, background y foreground, Lexora derivará automáticamente el resto de colores de la interfaz usando sus reglas predeterminadas.

Para mejorar la accesibilidad, mantén un buen contraste entre fondo y primer plano.

Personalización de etiquetas

El objeto labels te permite sobrescribir los textos del reproductor. Es útil para localización, tono de producto o ajustes específicos de la interfaz.

La etiqueta loading se usa en los estados de carga estándar. La etiqueta generating se usa en modo automático mientras el audio se genera progresivamente. Las etiquetas jumpForward y jumpBack se usan automáticamente en iOS y Safari, donde los controles de velocidad de reproducción se sustituyen por controles de salto.

Claves de etiquetas disponibles

new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]',
  labels: {
    play: 'Play',
    stop: 'Stop',
    resume: 'Resume',
    pause: 'Pause',
    speed: 'Playback speed',
    close: 'Close',
    init: 'Press play to listen',
    loading: 'Loading speech...',
    generating: 'Generating speech...',
    jumpBack: 'Skip backward',
    jumpForward: 'Skip forward'
  }
});

Personalización de iconos

Puedes sustituir los controles predeterminados pasando SVG inline mediante el objeto icons.

Recomendación: usa fill="currentColor" o stroke="currentColor" para que los iconos hereden correctamente los colores del tema.

Claves de iconos disponibles

new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]',
  icons: {
    play: '<svg>...</svg>',
    pause: '<svg>...</svg>',
    stop: '<svg>...</svg>'
  }
});

Comportamiento del mini reproductor sticky

Cuando stickyplayer está activado, Lexora muestra un mini reproductor compacto cuando el reproductor principal sale del viewport.

• Solo aparece mientras la reproducción está activa o en pausa.
• Se oculta automáticamente cuando la reproducción termina o se detiene.
• Hereda la misma configuración visual del reproductor principal.

new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]',
  stickyplayer: true
});

Velocidad de reproducción

Cuando está activado, el control de velocidad alterna entre 1x, 1,5x y 2x.

En iOS y Safari, los controles de velocidad no están disponibles. En esos casos, Lexora sustituye automáticamente el control de velocidad por controles de salto hacia atrás y hacia delante.

new Lexora(target, {
  speech: '[YOUR_SPEECH_ID]',
  playspeed: true,
  jumpSeconds: 15
});

Opciones del modo automático

El modo automático permite a Lexora extraer texto legible directamente de la página y generar audio bajo demanda.

Opciones disponibles en modo automático

new Lexora(target, {
  mode: 'auto',
  contentTarget: '.article-body',
  language: 'en-US',
  voice: 'Aria',
  stickyplayer: true,
  style: {
    primary: '#7CD259',
    background: '#0C120D',
    foreground: '#FFFFFF'
  }
});

En modo automático, las opciones pasadas mediante JavaScript tienen prioridad sobre la configuración predeterminada del proyecto.

Uso recomendado

• Usa la integración mediante markup cuando quieras una configuración centralizada desde el panel de Lexora.
• Usa la integración mediante JavaScript cuando necesites control dinámico, interfaces personalizadas o actualizaciones en tiempo real.
• Usa etiquetas personalizadas para mantener el reproductor alineado con el tono de tu producto y el idioma de la interfaz.
• Usa solo los tres colores base cuando quieras que Lexora derive automáticamente el resto de la interfaz.
• Usa el objeto completo de style cuando necesites un control más detallado sobre botones, barra de progreso y visualizador.