React Speech Highlight
React text-to-speech with highlighting the words and sentences that are being spoken using audio files, text-to-speech API, and web speech synthesis API
Simply, it Highlight Anything!
v5.2.3
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 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 Speech Highlight by github.com/albirrkarim