React Speech Highlight v5.4.2 - Text-to-Speech with Word Highlighting

Examples

This page contains all the implementation examples that user of this package asked for, this is my approach to solve it.

1. Streaming Text (Beta)

Streamed Text (from Backend) + Played TTS with highlight (in client side) (still use audio file not realtime)

With help of python or node js server we can do stream the text from the result of chat completion open ai

Try something long, like "Explain me detail about roman empire"

2. Pluginify

This package is getting larger and larger so we need to re architecure it using plugin feature architecure. See the browser console log

3. Use of LLM Engine

Some helpful function in the plugins that utilize LLM for many things.

Languages plugins

Enter text

Target Language Code (e.g., 'en' for English)

4. SRT Generation

Example of use this package for generating SRT file, Srt is a subtitle file format that is supported by many video players.

Some async function that takes (audio, text (optionaly)) then return SRT string

Generate SRT while playing

Cats, beloved companions, exhibit fascinating behaviors. From their graceful leaps to affectionate purrs, these enigmatic creatures captivate our hearts. With a diverse range of breeds, each cat brings its own unique charm, making them the perfect addition to any home.

Batched Version

The subtitle generated onBeforeAudioPlay event is batched version.

Full Version

The subtitle generated onEnded event is full version.