DocsAudio PlayerOverview

Audio Player Overview

The Lexora Audio Player is the playback layer of the Lexora ecosystem. While Speech Core generates AI audio from text, the Audio Player is responsible for rendering, controlling, and distributing that audio on your website.

It is lightweight, embeddable, responsive, and designed to separate generation from playback.

Architecture Overview

Lexora follows a modular architecture:

  1. Text is converted to audio via Speech Core.
  2. A unique speech key (Audio ID) is generated.
  3. The Audio Player uses that key to fetch and render the audio session.

This separation ensures:

  • No regeneration required for playback.
  • No additional credit usage when embedding.
  • Scalable distribution across multiple pages.

Embedding Methods

First of all, you need to integrate the Lexora library into your <head> or <body> section. 

<script src="https://lexora.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>

After that, you can embed the player in two different methods.

1) Markup Embed (Automatic Initialization)

The simplest integration method uses the custom element: 

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

The data-speech attribute must contain the speech key generated by Speech Core.

When the script loads:

  • All <lexora> elements are automatically initialized.
  • The audio session is fetched.
  • The widget UI is rendered.

This method automatically inherits the styling and configuration defined in your Lexora dashboard.

2) JavaScript Initialization (Programmatic Control)

For advanced control, initialize the player manually: 

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

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

This method allows runtime customization of:

  • Theme (colors)
  • Labels (UI text)
  • Icons (SVG overrides)
  • Sticky player behavior
  • Playback speed control

Playback Flow

When a player instance is created, Lexora:

  1. Requests an audio session using the speech key.
  2. Preloads audio metadata and duration.
  3. Displays an initialization message (e.g., “Press play to listen”).
  4. Loads the full audio stream when playback starts.

Playback states include:

  • Idle
  • Loading
  • Playing
  • Paused
  • Stopped

Sticky Player

When enabled, Lexora automatically creates a mini fixed player that appears when the main widget scrolls out of view.

  • Visible only during active playback.
  • Automatically hidden when playback stops.
  • Shares the same theme and behavior.

This ensures continuous access to playback controls across long pages.

Playback Speed

The player supports speed toggling between:

  • 1x
  • 1.5x
  • 2x

Note: Playback speed controls are automatically disabled on iOS devices due to WebKit limitations.

Responsive & Shadow DOM

The Audio Player is built using Shadow DOM isolation. This ensures:

  • No CSS conflicts with your website.
  • Scoped styles for consistent rendering.
  • Safe integration in any CMS or framework.

The player is fully responsive and adapts to mobile, tablet, and desktop layouts.

Scalability & Performance

  • Audio is generated once and reused everywhere.
  • Embedding does not consume additional credits.
  • The script auto-initializes dynamically added players.
  • Lightweight loading strategy for performance.
Installation