How to make Text to Speech in Javascript using Simple 3 Lines of Code

Today, we'll show you how to make a simple text to speech in Javascript in just 3 lines of code.

It's very simple in javascript to gain that.

Let's start:

function textToSpeach(message) {
    const speach = new SpeechSynthesisUtterance(message);
    [speach.voice] = speechSynthesis.getVoices();
    speechSynthesis.speak(speach);
}

textToSpeach('Hi, Welcome to Javascript Text to Speech. It is really awesome.');

For testing, just paste the code inside the browser console and you'll able to listen the text.

Bonus: an ES6 implementation

const textToSpeach = (message) => {
    const speach = new SpeechSynthesisUtterance(message);
    [speach.voice] = speechSynthesis.getVoices();
    speechSynthesis.speak(speach);
}

textToSpeach('Hi, Welcome to Javascript Text to Speech. It is really awesome.');

Basic Web API - The SpeechSynthesisUtterance of the Web Speech API contains a speech request.

It contains the content the speech service should read and information about how to read it (e.g. language, rate, pitch and volume.)

Line by Line Code Demonstration:

In first line -  

const speach = new SpeechSynthesisUtterance(message);

We made an instantiation of SpeechSynthesisUtterance class of a text message as default argument.

In second line - 

[speach.voice] = speechSynthesis.getVoices();

We add voice to the speech object by getting the voices. 

In third line -

speechSynthesis.speak(speach);

We just voice out that with the speak function. 

All Properties of SpeechSynthesisUtterance:

lang
Gets and sets the language of the utterance.

pitch
Gets and sets the pitch at which the utterance will be spoken at.

rate
Gets and sets the speed at which the utterance will be spoken at.

text
Gets and sets the text that will be synthesised when the utterance is spoken.

voice
Gets and sets the voice that will be used to speak the utterance.

volume
Gets and sets the volume that the utterance will be spoken at.

So, an alternative approach to convert text to speech would be with all parameter set -

const message = new SpeechSynthesisUtterance();
message.text = "Hi, I'm Javascript";
message.volume = 1; // Volume range = 0 - 1
message.rate = 1.2; // Speed of the text read , default 1
message.lang = 'en-US'; // Language, default 'en-US'
window.speechSynthesis.speak(message);

Text to Speech JavaScript Web API:

https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API

Web API of SpeechSynthesisUtterance:

https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/SpeechSynthesisUtterance

So, we're pretty much clear how to text to speech in javascript and with modifications of all custom stuffs. Let's implement this text to speech in your application right now.