Vanilla Speech Highlight

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

v5.4.2

Designed to be light and no dependencies

Bundle Size 70 KB

Overview

This Vanilla Speech Highlight is based on the React Speech Highlight , So the capabilities, API's and workflow is simillar, see the docs

A. Demo using built in browser web speech synthesis API

Play Control

Seek Sentence

Seek Paragraph

Adjust while playing

Volume

Rate

Pitch

El Fascinante Mundo de los Gatos

Los gatos han sido compañeros humanos durante milenios, cautivando a la gente con su elegancia y misterio. Estos felinos, conocidos por su independencia y gracia, han dejado una huella indeleble en la historia y la cultura.

Orígenes Misteriosos

Los orígenes exactos de la domesticación de los gatos aún son un misterio. A diferencia de los perros, los gatos no fueron domesticados por su utilidad práctica, sino que se acercaron a los humanos en busca de refugio y alimento. Se cree que esto ocurrió hace más de 4,000 años en el antiguo Egipto, donde los gatos eran reverenciados y considerados sagrados.

This is alternative approach like react state in vanilla js

statusHL

idle

spokenHL.word

spokenHL.sentence

spokenHL.viseme

see the browser console log to see how accurate the viseme

spokenHL.precentageWord

0%

spokenHL.precentageSentence

0%

B. Using Prefer Audio

It means prefer using audio file instead of web speech synthesis api. see the overview

Play Control

Seek Sentence

Seek Paragraph

Adjust while playing

Volume

Rate

Pitch

El Fascinante Mundo de los Gatos

Los gatos han sido compañeros humanos durante milenios, cautivando a la gente con su elegancia y misterio. Estos felinos, conocidos por su independencia y gracia, han dejado una huella indeleble en la historia y la cultura.

Orígenes Misteriosos

Los orígenes exactos de la domesticación de los gatos aún son un misterio. A diferencia de los perros, los gatos no fueron domesticados por su utilidad práctica, sino que se acercaron a los humanos en busca de refugio y alimento. Se cree que esto ocurrió hace más de 4,000 años en el antiguo Egipto, donde los gatos eran reverenciados y considerados sagrados.

This is alternative approach like react state in vanilla js

statusHL

idle

spokenHL.word

spokenHL.sentence

spokenHL.viseme

see the browser console log to see how accurate the viseme

spokenHL.precentageWord

0%

spokenHL.precentageSentence

0%

B. Using Prefer Audio (English)

It means prefer using audio file instead of web speech synthesis api. see the overview

Play Control

Seek Sentence

Seek Paragraph

Adjust while playing

Volume

Rate

Pitch

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.

This is alternative approach like react state in vanilla js

statusHL

idle

spokenHL.word

spokenHL.sentence

spokenHL.viseme

see the browser console log to see how accurate the viseme

spokenHL.precentageWord

0%

spokenHL.precentageSentence

0%

C. Using Built in Web Speech Synthesis and set config.fallbackAudio with with async function that takes input text and returned audio url.

It means when Built in Web Speech Synthesis fail (maybe your user device doesn't have any voices) the fallbackAudio function will be triggered and return the audio file

Play Control

Seek Sentence

Seek Paragraph

Adjust while playing

Volume

Rate

Pitch

El Fascinante Mundo de los Gatos

Los gatos han sido compañeros humanos durante milenios, cautivando a la gente con su elegancia y misterio. Estos felinos, conocidos por su independencia y gracia, han dejado una huella indeleble en la historia y la cultura.

Orígenes Misteriosos

Los orígenes exactos de la domesticación de los gatos aún son un misterio. A diferencia de los perros, los gatos no fueron domesticados por su utilidad práctica, sino que se acercaron a los humanos en busca de refugio y alimento. Se cree que esto ocurrió hace más de 4,000 años en el antiguo Egipto, donde los gatos eran reverenciados y considerados sagrados.

This is alternative approach like react state in vanilla js

statusHL

idle

spokenHL.word

spokenHL.sentence

spokenHL.viseme

see the browser console log to see how accurate the viseme

spokenHL.precentageWord

0%

spokenHL.precentageSentence

0%

F. Youtube Transcript Word Highlight

Loading ...

G. Streamed Text with play TTS Highlight

Goto the streaming example page

The Vanilla Speech Highlight capabilities, limitation, and license is same with React Speech Highlight

Buy now, Save your time

React / Vanilla Speech Highlight - Highlight Anything | Product Hunt

Vanilla Speech Highlight by github.com/albirrkarim