Let the browser speak by using the Web Speech API

I found out that there is a Web Speech API which can be used in JavaScript for text-to-speech conversion. We can use it to let the browser speak from a given written text.

When this API is available, the window object should have a property called speechSynthesis which we need to use.

Autoplay in Chrome

The Chrome browser has disabled the possibility to use speechSynthesis.speak(...) directly after page load, when the document has not detected a user interaction yet. That means that the user must interact with the page first before we can use this functionality. A way to do that is by letting the user press a button.

Speak code example

This examples shows an input-field and button. When the user clicks the button, the text in the input-field will be spoken.

HTML:

<input class="speak-input" type="text" value="Hi, how are you?" />
<button class="speak-button" type="button">Speak</button>

JavaScript:

function speak(text) {
  try {

    const utterance = new SpeechSynthesisUtterance();
    utterance.text = text;

    const synth = window.speechSynthesis;
    synth.speak(utterance);

  } catch {
    console.error('Web Speech API is not available.');
  }
}

const input = document.getElementsByClassName('speak-input')[0];
const button = document.getElementsByClassName('speak-button')[0];
button.addEventListener('click', () => {
    speak(input.value);
});

Speak with another voice

It is possible to use a different voice than the default one. We can get the available voices by calling the getVoices() method from the window.speechSynthesis object.

Here is an example where we try to let the browser speak with a voice of a specific language.

function speak(text) {
  const languageCode = 'en-US';

  const synth = window.speechSynthesis;
  const voice = getVoice(synth, languageCode);

  const utterance = new SpeechSynthesisUtterance();
  utterance.text = text;
  utterance.voice = voice;

  synth.speak(utterance);
}

function getVoice(speechSynthesis, languageCode) {
  const voices = speechSynthesis.getVoices();
  
  // 1) Get voices.
  // It's possible that there are no voices.
  if (!voices || voices.length === 0) {
    return null;
  }

  // 2) Select voice by language code.
  // It's possible that there is no voice with the specific language.
  const voice = voices.find((v) => v.lang === languageCode);
  if (voice) {
    return voice;
  }

  // 3) Select the default voice.
  // It's possible that there is no voice where 'default' is true.
  voice = voices.find((v) => v.default);
  if (voice) {
    return voice;
  }

  // 4) Select the first voice.
  return voices[0];
}

speak("Hi, how are you?");

References

MSDN documentation about Web Speech API

Example program that uses the Speech Synthesiser