SpeechSynthesis
===============

The **`SpeechSynthesis`** interface of the Web Speech API is the controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.

EventTarget

SpeechSynthesisInstance properties
-------------------

*`SpeechSynthesis` also inherits properties from its parent interface, `EventTarget`.*

`SpeechSynthesis.paused` Read only 

A boolean value that returns `true` if the `SpeechSynthesis` object is in a paused state.

`SpeechSynthesis.pending` Read only 

A boolean value that returns `true` if the utterance queue contains as-yet-unspoken utterances.

`SpeechSynthesis.speaking` Read only 

A boolean value that returns `true` if an utterance is currently in the process of being spoken — even if `SpeechSynthesis` is in a paused state.

Instance methods
----------------

*`SpeechSynthesis` also inherits methods from its parent interface, `EventTarget`.*

`SpeechSynthesis.cancel()`

Removes all utterances from the utterance queue.

`SpeechSynthesis.getVoices()`

Returns a list of `SpeechSynthesisVoice` objects representing all the available voices on the current device.

`SpeechSynthesis.pause()`

Puts the `SpeechSynthesis` object into a paused state.

`SpeechSynthesis.resume()`

Puts the `SpeechSynthesis` object into a non-paused state: resumes it if it was already paused.

`SpeechSynthesis.speak()`

Adds an `utterance` to the utterance queue; it will be spoken when any other utterances queued before it have been spoken.

Events
------

Listen to this event using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.

`voiceschanged`

 Fired when the list of `SpeechSynthesisVoice` objects that would be returned by the `SpeechSynthesis.getVoices()` method has changed.
 Also available via the `onvoiceschanged` property.


Examples
--------

First, a simple example:


```js
let utterance = new SpeechSynthesisUtterance("Hello world!");
speechSynthesis.speak(utterance);
```


Now we'll look at a more fully-fledged example. In our Speech synthesizer demo, 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()` 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(), create a new `SpeechSynthesisUtterance` instance containing the text from the text `<input>`, set the utterance's voice to the voice selected in the `<select>` element, and start the utterance speaking via the `SpeechSynthesis.speak()` method.


```js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");
const pitch = document.querySelector("#pitch");
const pitchValue = document.querySelector(".pitch-value");
const rate = document.querySelector("#rate");
const rateValue = document.querySelector(".rate-value");

let voices = [];

function populateVoiceList() {
  voices = synth.getVoices();

  for (let i = 0; i < voices.length; i++) {
    const option = document.createElement("option");
    option.textContent = `${voices[i].name} (${voices[i].lang})`;

    if (voices[i].default) {
      option.textContent += " — DEFAULT";
    }

    option.setAttribute("data-lang", voices[i].lang);
    option.setAttribute("data-name", voices[i].name);
    voiceSelect.appendChild(option);
  }
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

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

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (let i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  utterThis.pitch = pitch.value;
  utterThis.rate = rate.value;
  synth.speak(utterThis);

  inputTxt.blur();
};
```

Specifications
--------------

| Specification |
| --- |
| Web Speech API # tts-section |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API