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

• key (string): required speech key (Audio ID).
• stickyplayer (boolean): enables or disables the sticky mini player.
• playspeed (boolean): enables or disables playback speed controls.

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

Style Customization

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

Supported Style Keys

• primary: main accent color.
• background: player background color.
• foreground: main text and icon color.
• widget-btn-background: main play and stop button background.
• widget-btn-foreground: main play and stop icon color.

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

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 jumpBackward labels are used automatically on iOS, where playback speed controls are not available and the player shows jump controls instead.

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...',
    jumpForward: 'Skip forward',
    jumpBackward: 'Skip backward'
  }
});

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.

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, playback speed controls are not available due to platform limitations. 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
});

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.