Text to Speech with Javascript

Quick Sample Code

// speak "Hello World" in the browser default language
window.speechSynthesis.speak(new SpeechSynthesisUtterance('Hello World'));

Demo — Text to Speech

SpeechSynthesis Object

SpeechSynthesis object is a part of the Web Speech API, that performs text to speech service in the browser. This is exposed through the global window.speechSynthesis object.

let synth = window.speechSynthesis;

The important methods defined in it are :

• speak() : This method will add a speech to a queue called utterance queue. This speech will be spoken after all speeches in the queue before it have been spoken.

• getVoices() : This method will give a list of available voices that can be played. Each voice has properties like the name, language etc.

Here are the complete APIs for the SpeechSynthesis object.

SpeechSynthesisUtterance Object

Whenever you want a speech to be spoken, you will need to create a SpeechSynthesisUtterance object.

let utter = new SpeechSynthesisUtterance();

This object contains properties that affect various factors defining a speech :

• text : Text of the speech
• lang : Language of the speech. By default this is set to browser language.
• voice : Voice of speech. By default this set to the most suitable voice for the given language. A voice can also be set from one of the voices returned by window.speechSynthesis.getVoices() method.
• pitch : Pitch of the speech (default 1)
• rate : Speed at which speech will be spoken (default 1)
• volume : Volume of the speech (default 1)

In addition there are several events that are fired along the way of a speech, some of them are :

• onstart : Fired when speech has begun to be spoken
• onend : Fired when speech has finished
• onboundary : Fired when speech reaches a word or sentence boundary

Here are the complete APIs for the SpeechSynthesisUtterance object.

Javascript Code

// new SpeechSynthesisUtterance object
let utter = new SpeechSynthesisUtterance();
utter.lang = 'en-US';
utter.text = 'Hello World';
utter.volume = 0.5;

// event after text has been spoken
utter.onend = function() {
	alert('Speech has finished');
}

// speak
window.speechSynthesis.speak(utter);

Browser Compatibility

SpeechSynthesis API is available in all modern browsers — Firefox, Chrome, Edge & Safari.

Don't Autoplay a Speech

Some sites start a speech upon the page being loaded. To prevent such autoplay behavior, it is now required to have some user interaction before speech synthesis API will work. Autoplaying a speech on page load will throw an error.

Find more about autoplay policies on the web.