React Speech Highlight
Powerful library for integrating text-to-speech and real-time word/sentence highlighting into your web applications. It supports Audio files, Text-to-Speech API, and Web Speech Synthesis API, making it ideal for creating interactive, accessible, and dynamic user experiences.
Simply, it Highlight Anything!
v5.4.2
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
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.
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 goto Example Page and issue solving goto Issues Page
- Streamed Text from Backend + Played TTS with highlight (still use audio file)
- How Plugin work
- SRT Generation
Realtime
Realtime timing prediction of streamed content
Realtime Communication
Task that the audio is feed to client side in real time like you are on a phone call, theres no audio file behind it.
Recently open ai made realtime api it use Web RTC (Web Real-Time Communication) but the API like this is expensive for now.
So please use your own secret key to try
Real-time TTS Highlight using openai
Input you secret key here to try the demo
Streamed Text
Streamed Text (from Backend) + Played TTS with highlight (in client side) (still use audio file not realtime audio)
This approach is more cheaper than the realtime API on the left.
With help of python or node js server we can do stream the text from the result of chat completion open ai
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
Place your bid!
Due to the high demand for this library, access is granted through a bidding process. To secure your spot, please submit your bid within the designated timeframe. The highest bidders will be given priority access.
React Speech Highlight by 
github.com/albirrkarim