Features:

- Precise Highlight

- Human like sound (you can use your audio file) see

- Generate viseme for current spoken TTS see

- Accurate terms or equations pronunciation using LLM, see

- Highlight animation without react rerender so the performance is fast

- Work on all environment

- Solve the Text To Speech Problems

- Support when you only using vanilla js, see Vanilla Speech Highlight

- Well Crafted: Written in Typescript, Test with Jest, Code linting with Eslint, Well documented with JS Doc, and tested in production devices.

Overview

Overview how react speech highlight work
Feature overview of react speech highlight

Server Side Rendering

This website is using next js that have server side rendering capability, its good for SEO.

What is that? Right Click, then open view page source, the article text below will appear.

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.

Double Highlight & Real Human Voice

You can do double highlight maybe in two or more with utilizing the "spokenHL.word" API

Javanese script:

ꦲ, ꦤ, ꦕ, ꦫ, ꦏ, ꦢ, ꦠ, ꦱ, ꦮ, ꦭ, ꦥ, ꦝ, ꦗ, ꦪ, ꦚ, ꦩ, ꦒ, ꦧ, ꦨ, ꦩ,

Latin Transcript (Voice Over With Javanese Pronounciation):

ha, na, ca, ra, ka, da, ta, sa, wa, la, pa, dha, ja, ya, nya, ma, ga, ba, tha, nga

Other transcript eg. Arabic script:

ها, نا, چا, را, كا, دا, تا, سا, وا, لا, پا, ڎا, جا, يا, نْيا, ما, ڠا, با, ثا, نْغا,

Video Transcript Highlight

All demo related on video player. Click on the card to see the demo.

Youtube Transcript Highlight

Youtube Transcript Highlight

Demonstrate:

  • Use of virtual node todo text to speech for handling complex html structure.
  • Relation Highlight feature. When you hover into some word, the related word will be highlighted too. Example when you hover into chinese word, the pinyin and english word will be highlighted too and vice versa.
  • Tips: Just click play on youtube video of hover into some word to see the effect. and try double click into some word to seek the video.
Auto Transcribe Video

Auto Transcribe Video

Demonstrate:

  • Case: You just have audio or video file without text transcript
  • With our hybrid engine you can transcribe the video or even translate it

Coordinate Highlight

You can do Highlight with some svg polygon based on the coordinate

Try to hover and do double click on the text.

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.

Auto Transcribe

Case: You just have audio or video file without text transcript

Input audio

Example Page

Many my implementation approach and issue solving goto Example Page

- Streaming TTS with Highlight

- Pluginify

- SRT Generation

Custom Example

This package offering flexible Text to Speech for your crazy idea, just tell me!

Limitation

1. Please tell me if you find something wrong in this demo website or do you want something? I give you discount (via discord: albirrkarim)

2. Read more about the limitation of this product

License

Buy once, Use it on all your projects. as long as the public can't see your project code

Appreciate my research by not share the code to other person

Buy now, Just Save your time!


Only USD $200

or if you are student, just send me message and tell me your project, i will give a discount

or vote this product on product hunt, i will give a discount

Just buy now before the price increased

One time payment, no subscription. Get 1 year access to private repo to receive updates.


React / Vanilla Speech Highlight - Highlight Anything | Product Hunt

See How to pay with github sponsors, or gopay, bank transfer, etc..

React Speech Highlight by github.com/albirrkarimgithub.com/albirrkarim