English | 简体中文

React / Vanilla js 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.

Try the demo React Speech Highlight

We support implementation using vanilla js. this package has bundle size of 45 KB. You can easily combine this library with your website, maybe your website using jquery

Read the API_VANILLA.md to see the different.

Try the demo Vanilla Speech Highlight

Watch Youtube Video about implementation vanilla speech highlight for javascript text to speech task.

Built with react native cli. Try the demo android app

Do you want other implementation? just ask me via discord: albirrkarim

This is the Documentation for web version

Table Of Contents

• A. Introduction
• B. Todo
• C. API & Example Code
• D. Changelog
• E. Disclaimer & Warranty
• F. FAQ
• G. Payment

Recently, I want to implement the text-to-speech with highlight the word and sentence that are being spoken on my website.

Then i do search on the internet. but i can't find the npm package to solve all TTS problems

I just want some powerfull package that flexible and good voice quality.

Overall the text to speech task comes with problems (See the detail on PROBLEMS.md) whether using web speech synthesis or the audio file.

Using Web SpeechSynthesis

They have problems Robot like sound, Supported Devices Available, etc..

Using paid subscription text-to-speech synthesis API

When we talk about good sound / human like voices AI models inference should get involved. So it doesn't make sense if doing that on client side.

Then the speech synthesis API provider like ElevenLabs, Google Cloud, Amazon Polly, and Open AI play their roles.

But they don't provide the npm package to do highlighting.

Then i found Speechify. but i don't find any docs about using some npm package that integrate with their service. Also this is a paid subscriptions services.

Searching again, Then i found ElevenLabs its free if the 10000 character / month and will reset on next month. Cool right? So i decide to use this as speech synthesis API in my project. This platform also doesn't provide the react npm package to highlight their audio, but they provide streaming output audio that can be use to produce "when the words is spoken in some audio" (transcript timestamp) like someone make about this thing.

In production you must do cost calculation, which TTS Service API provider you should choose. The services that have capability streaming audio is promising highlight word. but also comes with high price. The cheap TTS service API usually don't have much features.

The elevenlabs have produce good quality voice and many features, but when comes for production they more expensive compares with Open AI TTS, In production the cost is important matter.

So, I decide to making this npm package that combines various methods above to achives all the good things and throw the bad things. All logic is done in client side, look at the overview above. No need to use advanced backend hosting.

My package combines Built in Web SpeechSynthesis and Audio File (optional) to run.

When using prefer/fallback to audio file you can achive high quality sound and remove all compactbility problem from Built in Web SpeechSynthesis.

How you can automatically get the audio file of some text ? you can use ElevenLabs, Google Cloud, Amazon Polly, and Open AI or any other TTS API as long as they can produce audio file (mp3, mp4, wav, etc...) for the detail see the AUDIO_FILE.md. In the demo website i provide you example using ElevenLabs and even you can try your own audio file on that demo web.

This package just take input text and audio file, so you can flexible to use any TTS API that can produce audio file, The expensive one or even cheap one when you consider the cost.

How this package know the timing spoken word or sentence of played audio? This package can detect the spoken word and sentence.

This package is one time pay. No Subscription. Who likes subscription? I also don't. see the how to purchase bellow.

When you are entrepreneur im sure you have some crazy uses case for this package.

• Interactive Blog

  Imagine that you have long article and have TTS button then played the text to speech and users can see how far the article has been read. you article will be SEO ready because this package has Server Side Rendering (SSR) capability.

• Web AI Avatar / NPC

  

  In the demo i provide, you can see the 3D avatar from readyplayer.me can alive playing the idle animation and their mouth can synchronize with the highlighted text to speech, it because this package has react state that represent current spoken viseme. the viseme list that i use in the demo is Oculus OVR LipSync.

• Language Learning App With Real Human Voice

  

  Look at the example 6 on the demo. its a example of use real human voice for text to speech. Maybe your local language is not supported by the TTS API. you can use this package to use the real human voice. The real human voice is recorded by the real human. The real human voice is more natural than the TTS API.

• Academic Text Reader

  

  The problem when we do TTS on academic text. it contains math equations, formula, symbol that the shown term is different with their pronounciation see. so we make some pronounciation correction engine utilizing the Open AI API to think what should the term pronounced.

• Relation Highlight and word level highlighting of youtube transcript

  

  See the example 7. It has youtube iframe, and the youtube transcript on the right, when you play the youtube video, the transcript will be highlighted. The highlighting is based on the current time of the played video. this package are follow the time.

  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. How it can? see. Limitation: it can only be use when the video has no background sound (for now).

• Video player with auto generate subtitle

  

  Case: You just have audio or video file without text transcript. Our package can generate the transcript from the audio file. or even transtlate the transcript to other language. The subtitle can be highlighted when the video is played, and maybe it want to show two different language subtitle at once. and also highlight the both based on the meaning of the words.

  On that screenshot the video original language is in italian, and i also show the translate in english. and the system is highlight both based on the meaning.

  Italian word notte have meaning in english night

  Go to this video demo page.

• Your use case here

  Just ask me what you want to make, the package architecture is scalable to make various feature.

• Add discord chat bot using LLM for explaining the API, and just explain what you want to make, and they will give you the code.
• Automation Brute Force End to End Testing, test all APIs, runtime, sequential action, etc...
• Add viseme support for chinese character
• Let me know what you want from this package, the package architecture is scalable to make various feature, please write it on issues tab, or contact me via discord (username: albirrkarim)

• Add example of streaming TTS with highlight. it play tts with highlight while even the text is still streamed.
• Re-Architecture the package into plugins system, and add optional backend-nify the LLM Engine, so it faster, secure and more reliable.
• Making Hybrid engine timestamp detection
• Relation Highlight Feature - Used in Youtube Transcript Highlight. Highlight the words in youtube transcript, and their relations to other word like their translation form.
• Add Virtual Node for flexible highlighting
• React Native Speech Highlight - Now we add support for mobile app version using React Native, try the demo app
• Accurate and cost effective pronounciation correction Using LLM Open AI Chat Completions for any terms or equations from academic paper, math, physics, computer science, machine learning, and more...
• Server Side Rendering Capability, see our demo is using next js
• Batch API request for making the audio file for long article content. it will improve efficiency and user experience. it for solve The delay of audio played and user gesture to trigger play must be close.
• Add example text to speech with viseme lipsync on 3D avatar generated from readyplayer.me. see
• Add viseme API for current spoken TTS, see
• Add vanilla js support, for those who don't use react, see vanilla demo
• Add fallback/prefer to audio file (.mp3/etc) when user doesn't have built in speech synthesis in their devices. or maybe prefer using audio file because the sound is better than robot like sound. see
• Docs integration text-to-speech with Eleven Labs API see the demo web
• Integration with React GPT Web Guide Package.
• Multi character support for non latin alphabet ( chinese (你好), russian (Привет), japanese (こんにちは), korean (안녕하세요), etc )
• Add language detection using LLM api
• Add seeking by sentence or paragraph, reading progress by word or sentence, Adjust config while TTS playing., Custom Abbreviation Function
• Realiability: TTS that can't die, Test on any platform, Code Linting using eslint, Using Typescript, Tested (Prompt Test, Unit Test, Engine Test)
• Add demo website

See API.md and EXAMPLE_CODE.md that contain simple example code.

The full example code and implementation example is using source code from demo website. the source code of demo website is included when you buy this package.

This package is written with typescript, You don't have to read all the docs in here, because this package now support js doc and VS Code IntelliSense what is that? simply its when you hover your mouse into some variable or function VS Code will show some popup (simple tutorial) what is the function about, examples, params, etc...

Just use the source code from demo website, you can literally just understand the package.

Changelog contains information about new feature, improve accuracy, fix bug, and what you should do when the version is update.

See CHANGELOG.md

There's no refund.

I love feedback from my customers. You can write on the issue tab so when i have time i can try to solve that and deliver for the next update.

Still worry? see the reviews on producthunt

After you pay you will be invited inside my private repo and stay inside for 1 year to receive any updates.

For individual developer, freelancer, or small business.

The price is $200. Too expensive? See the demo website maybe theres a discount for you.

What you got

• The demo website (Next js based)

• The package repo (React Speech Highlight)

• The package repo (Vanilla Speech Highlight)

For you that already have business and want solid package that can be used for long term.

The price is $700.

What you got

• Web version this package.
• Architecture support, i can make some drawing about the architecture of implementation.
• Implementation code review, i can review your code do best practice implementation.
• 4 years inside private repo and support.

The price is $150.

What you got

• The Demo App source code based on React Native CLI (Ready) (Try demo android app)

• Python server ($20)

Contains: YouTube relation transcript highlight, Video auto-generate transcript, Streaming TTS

• Node js server ($20)

Contains: Backenify LLM engines

React GPT Web Guide ($100) + React Speech Highlight($200)($50) = $150

What you got

• The demo website (Next js based)
• All the private repo web version of React Speech Highlight

I accept various payment method:

Github Sponsors

Choose One Time Tab, Select the option, and follow the next instruction from github.

If you are in indonesia (my country) you can easily transfer through bank and e wallet (gopay, shopee pay, jenius)

So this package is the answer for you who looking for:

• Best Text to Speech Library
• Text to speech with viseme lipsync javascript
• Javascript text to speech highlight words
• How to text to speech with highlight the sentence and words like speechify
• How to text to speech with highlight the sentence and words using elevenlabs
• How to text to speech with highlight the sentence and words using open ai
• How to text to speech with highlight the sentence and words using google speech synthesis
• Text to speech javascript
• Typescript text to speech
• Highlighted Text to Speech
• Speech Highlighting in TTS
• TTS with Sentence Highlight
• Word Highlight in Text-to-Speech.
• Elevenlabs TTS
• Highlighted TTS Elevenlabs
• OpenAI Text to Speech
• Highlighted Text OpenAI TTS
• React Text to Speech Highlight
• React TTS with Highlight
• React Speech Synthesis
• Highlighted TTS in React
• Google Speech Synthesis in React
• Text to Speech React JS
• React JS TTS
• React Text-to-Speech
• TTS in React JS
• React JS Speech Synthesis
• JavaScript TTS
• Text-to-Speech in JS
• JS Speech Synthesis
• Highlighted TTS JavaScript
• Youtube Transcript Highlight
• Word Highlight in Youtube Transcript
• How to Highlight Words in Youtube Transcript
• Youtube Transcript Word Timing
• Streaming TTS with highlight