Real time text-to-speech converter using Javascript

Text-to-speech conversion in the browser using Javascript is quite easy with the Javascript function speechSynthesis(). The minimal code that can be used for this is as below.

var speech = new SpeechSynthesisUtterance();
var all_voices = speechSynthesis.getVoices();

speech.voice = all_voices[1];
speech.text = "Hello John. Welcome to Devsheet";

speechSynthesis.speak(speech);

In the above code, we created a new object speech from SpeechSynthesisUtterance. You can add text, language, and voice objects to it. After creating a speech object and its configuration you can pass this to speechSynthesis.speak() method and you can hear the text that you provided in speech.text

Add text that needs to be converted to speech object

var speech = new SpeechSynthesisUtterance();
speech.text = "Replace this text with your text";

After creating a speech object you can assign text to it that you want to convert using above Javascript code.

Get all voices objects and assign to speech.voice property

const all_voices = speechSynthesis.getVoices();

speech.voice = all_voices[1];

Javascript method speechSynthesis.getVoices() return array of all voices object that are available in the browser. You can get the voice object by index and assign it to speech.voice property.

Assign speed rate to speech.rate property

var speech = new SpeechSynthesisUtterance();
speech.rate = -2;

By default speech.rate value is -1. You can assign your own value to it. This defines the speed of the voice that will be converted.

Was this helpful?