SpeechSynthesis is used to read text out loud on web browsers using JavaScript, provided that the browser supports Text-to-Speech. It is a component of the Web Speech API, which includes SpeechSynthesis (Text-to-Speech) and SpeechRecognition (Asynchronous Speech Recognition).

How to change the voice

Usually, platforms provide a list of voice options, and we can select one of those voices for the speech. The available voices may depend on the operating system and browser.

Here are the steps to use the desired voice for the speech:

  • Get the available voices from SpeechSynthesis:

    const voices = speechSynthesis.getVoices();

  • Create a new instance of SpeechSynthesisUtterance:

    const utter = new SpeechSynthesisUtterance('Your text');

  • Set the voice that we want to use from the list of voices:

    utter.voice = voices[0];

    Here, we are using the first voice in the list.

  • Now, if we call the speak() method, it will read out the text using the selected voice:

    speechSynthesis.speak(utter);

Here is a step-by-step guide on how to use Text-to-Speech on a browser with JavaScript.

Why is the speechSynthesis.getVoices() method returning an empty array?

If the browser has not yet loaded the available voices the speechSynthesis.getVoices() method may return an empty array. This is because the browser needs some time to load the voices. To ensure that the voices have been loaded, we can listen for the voiceschanged event on the speechSynthesis instance. When the event is fired, it means that the voices have been loaded and we can call speechSynthesis.getVoices() to get the array of available voices.

Here's an example of using the event listener:

speechSynthesis.addEventListener("voiceschanged", () => {
  const voices = speechSynthesis.getVoices();
  ...
});

Alternatively, we can also use the onvoiceschanged event handler:

speechSynthesis.onvoiceschanged = () => {
  const voices = speechSynthesis.getVoices();
  ...
};