Player Customization

Embedding Methods

Start by installing the Lexora library on your website. Once the installation is complete, you can integrate Text to Speech using one of the following approaches:

1) Markup Embed

This is the simplest integration method. The player initializes automatically and applies the settings already configured in your Lexora project.

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

Use this method when you want consistent styling and behavior across multiple pages without writing custom JavaScript.

2) JavaScript Initialization

Use JavaScript when you need more control over rendering, runtime updates, or page-specific behavior.

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

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

Lexora merges your configuration with the default player settings, so you only need to pass the options you want to override.

Supported JavaScript Options

Core Options

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

Style Customization

The style object controls the visual theme of the player. These values are applied internally as CSS variables.

Supported Style Keys

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'
  }
});

If you only set primary, background, and foreground, Lexora automatically derives the other UI colors using its default fallback rules.

For accessibility, keep a strong contrast between background and foreground colors.

Labels Customization

The labels object lets you override the player text. This is useful for localization, product tone, or language-specific UI adjustments.

The loading label is used for standard loading states. The generating label is used in Auto Mode while speech is being generated progressively. The jumpForward and jumpBack labels are used automatically on iOS and Safari, where playback speed controls are replaced by jump controls.

Supported Label Keys

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'
  }
});

Icons Customization

You can replace the default controls by passing inline SVG strings through the icons object.

Recommended: use fill="currentColor" or stroke="currentColor" so icons inherit your theme colors correctly.

Supported Icon Keys

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

Sticky Player Behavior

When stickyplayer is enabled, Lexora shows a compact sticky player when the main player leaves the viewport.

• It appears only while playback is active or paused.
• It hides automatically when playback stops.
• It inherits the same style configuration as the main player.

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

Playback Speed

When enabled, the speed control cycles through 1x, 1.5x, and 2x.

On iOS and Safari, playback speed controls are not available. In that case, Lexora automatically replaces the speed control with jump backward and jump forward controls.

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

Auto Mode Options

Auto Mode lets Lexora extract readable text directly from the page and generate speech on demand.

Supported Auto Mode Options

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

In Auto Mode, runtime options passed through JavaScript take priority over the project defaults.

Recommended Usage

• Use markup embed when you want centralized configuration from the Lexora dashboard.
• Use JavaScript embed when you need dynamic control, custom interfaces, or runtime updates.
• Use customized labels to keep the player consistent with your product tone and UI language.
• Use only the three base colors when you want Lexora to derive the rest of the interface automatically.
• Use the full style map when you need fine-grained control over buttons, seekbar, and visualizer.