---
description: Updated on July 23, 2019
---

# Text to Speech with Javascript

{% hint style="info" %}
[Download ตัวอย่างโปรแกรม text fo speech with JavaScript](https://codepen.io/SteveJRobertson/pen/emGWaR?editors=1111&__cf_chl_jschl_tk__=dded97dd4d83d7004d9f10894d9477cb71fd49af-1583938411-0-AbHf-K5xNWorerT4kKvw1JJ3dtUgaNGObIlyPpt2p0CS3Nlx0WjDd3DlfXoPWh06-ZcOzuR92tDJH-k20OcQfb1ip7iLHzSHvVBcw2Qc9T0dgV9amDJQkAWt6QOyLmlA4ioczqXUNGtwHpOqeLj9_foqkV2xSWg364_8_tC1nVQKh9zZ8l4fKjRHsfJzV3Z5f4-1SDM4kDu0K7Wph8SXOMycSUPXbnAfnm8qfj8Smh9x0Z6ccrIPQ-2xcvFrVtpxafuXdowTGOKSiw3m_ICRqebvxv4nrQz5EmxtL7bNwV1E6Z3Jb0SUvNNUlt-Gm_b2xSifXSH5EBS4pqbehaQQn-XQeNN1nAbYms2flCSsSHHw3aUdBjxYt4IfzEN0bqg95Q)
{% endhint %}

**Concepts and Methods Involved**

* **SpeechSynthesis API** — SpeechSynthesis API is the API that performs text to speech service in the browser. This is exposed through window.speechSynthesis

**SpeechSynthesis API**

SpeechSynthesis API is a part of the Web Speech API, that is responsible for speech service. The global window.speechSynthesis object implements the SpeechSynthesis API.

```javascript
var synth = window.speechSynthesis;
```

The important methods defined in it are :

*   **getVoices()** : This method will give a list of available voices that can be played. They will come in different languages, and you can set a language of your preference to speak. Each voice has few properties, some of them are name, lang etc.

    Important : **The list of voices may be loaded asynchronously in the browser** — some browsers (like Chrome) make a server request to get the voice list, while some (like Firefox) have the list loaded into them. So in order for the getVoices() method to work, you may need to wait for the list of languages to be loaded (otherwise list of voices may be returned empty). This can be done by listening to the voiceschanged event fired by window.speechSynthesis.

    A simple check that can be performed is to get the voice list initially. If empty, then listen to the voiceschanged eent.

```javascript
var available_voices;

// list of languages is probably not loaded, wait for it
if(window.speechSynthesis.getVoices().length == 0) {
	window.speechSynthesis.addEventListener('voiceschanged', function() {
		available_voices = window.speechSynthesis.getVoices();
	});
}
else {
	available_voices = window.speechSynthesis.getVoices();
}
```

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

Here are the [complete APIs for the SpeechSynthesis object](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis).

**SpeechSynthesisUtterance API**

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

```javascript
var utter = new SpeechSynthesisUtterance();
```

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

* **lang** : Language of the speech
* **pitch** : Pitch of the speech
* **rate** : Speed at which speech will be spoken
* **text** : Text of the speech
* **voice** : Voice of speech. This will be one of the voices returned by window.speechSynthesis.getVoices() method
* **volume** : Volume of the speech

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](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance).

**Sample Javascript Code**

```javascript
// list of languages is probably not loaded, wait for it
if(window.speechSynthesis.getVoices().length == 0) {
	window.speechSynthesis.addEventListener('voiceschanged', function() {
		textToSpeech();
	});
}
else {
	// languages list available, no need to wait
	textToSpeech()
}

function textToSpeech() {
	// get all voices that browser offers
	var available_voices = window.speechSynthesis.getVoices();

	// this will hold an english voice
	var english_voice = '';

	// find voice by language locale "en-US"
	// if not then select the first voice
	for(var i=0; i<available_voices.length; i++) {
		if(available_voices[i].lang === 'en-US') {
			english_voice = available_voices[i];
			break;
		}
	}
	if(english_voice === '')
		english_voice = available_voices[0];

	// new SpeechSynthesisUtterance object
	var utter = new SpeechSynthesisUtterance();
	utter.rate = 1;
	utter.pitch = 0.5;
	utter.text = 'Hello World';
	utter.voice = english_voice;

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

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

**Browser Compatability**

SpeechSynthesis API is availabe in all current versions of Firefox, Chrome, Edge & Safari.

**Don't Autoplay a Speech**

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

Find more about [autoplay policies on the web](https://developers.google.com/web/updates/2018/11/web-audio-autoplay).

Reference : [https://usefulangle.com/post/98/javascript-text-to-speech](https://usefulangle.com/post/98/javascript-text-to-speech)

## Example II : SpeechSynthesisUtterance



The **`SpeechSynthesisUtterance`** interface of the [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)

### Constructor <a href="#constructor" id="constructor"></a>

[`SpeechSynthesisUtterance.SpeechSynthesisUtterance()`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/SpeechSynthesisUtterance)Returns a new `SpeechSynthesisUtterance` object instance.

### Properties <a href="#properties" id="properties"></a>

_`SpeechSynthesisUtterance` also inherits properties from its parent interface,_ [_`EventTarget`_](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget)_._[`SpeechSynthesisUtterance.lang`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/lang)Gets and sets the language of the utterance.[`SpeechSynthesisUtterance.pitch`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/pitch)Gets and sets the pitch at which the utterance will be spoken at.[`SpeechSynthesisUtterance.rate`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/rate)Gets and sets the speed at which the utterance will be spoken at.[`SpeechSynthesisUtterance.text`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/text)Gets and sets the text that will be synthesised when the utterance is spoken.[`SpeechSynthesisUtterance.voice`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/voice)Gets and sets the voice that will be used to speak the utterance.[`SpeechSynthesisUtterance.volume`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/volume)Gets and sets the volume that the utterance will be spoken at.

### Events <a href="#events" id="events"></a>

Listen to these events using [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) or by assigning an event listener to the `on`_`eventname`_ property of this interface.[`boundary`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/boundary_event)Fired when the spoken utterance reaches a word or sentence boundary.\
Also available via the [`onboundary`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/onboundary) property.[`end`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/end_event)Fired when the utterance has finished being spoken.\
Also available via the [`onend`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/onend) property.[`error`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/error_event)Fired when an error occurs that prevents the utterance from being succesfully spoken.\
Also available via the [`onerror`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/onerror) property[`mark`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/mark_event)Fired when the spoken utterance reaches a named SSML "mark" tag.\
Also available via the [`onmark`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/onmark) property.[`pause`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/pause_event)Fired when the utterance is paused part way through.\
Also available via the [`onpause`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/onpause) property.[`resume`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/resume_event)Fired when a paused utterance is resumed.\
Also available via the [`onresume`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/onresume) property.[`start`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/start_event)Fired when the utterance has begun to be spoken.\
Also available via the [`onstart`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/onstart) property.

### Examples <a href="#examples" id="examples"></a>

In our basic [Speech synthesiser demo](https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis), we first grab a reference to the SpeechSynthesis controller using `window.speechSynthesis`. After defining some necessary variables, we retrieve a list of the voices available using [`SpeechSynthesis.getVoices()`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices) and populate a select menu with them so the user can choose what voice they want.

Inside the `inputForm.onsubmit` handler, we stop the form submitting with [preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault),  use the [`constructor`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/SpeechSynthesisUtterance) to create a new utterance instance containing the text from the text [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), set the utterance's [`voice`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/voice) to the voice selected in the [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) element, and start the utterance speaking via the [`SpeechSynthesis.speak()`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/speak) method.

```
var synth = window.speechSynthesis;

var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('input');
var voiceSelect = document.querySelector('select');

var voices = synth.getVoices();

for(i = 0; i < voices.length ; i++) {
  var option = document.createElement('option');
  option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
  option.setAttribute('data-lang', voices[i].lang);
  option.setAttribute('data-name', voices[i].name);
  voiceSelect.appendChild(option);
}

inputForm.onsubmit = function(event) {
  event.preventDefault();

  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
  for(i = 0; i < voices.length ; i++) {
    if(voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  synth.speak(utterThis);
  inputTxt.blur();
}
```

Reference : [https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance)

