[Web] Use Web Speech API to make the browser speak out loud using SpeechSynthesis

Using the https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API(Web Speech API) it is possible to use speech synthesis in the browser without any additional libraries.

In this quick lesson we're going to use window.speechSynthesis in order to build an app that will say anything we put into a text input out loud using a default voice/pitch/volume set by the browser.

 

const textInput = document.getElementById("textInput");
const sayItButton = document.getElementById("sayItButton");

sayItButton.addEventListener("click", () => {
  const value = textInput.value;
  const sayThis = new SpeechSynthesisUtterance(value);

  window.speechSynthesis.speak(sayThis);

  textInput.blur();
});