Convert Text to Speech in JavaScript using Web Speech API

javascript browser

← PrevNext →

Tools you can use

If you are using Microsoft Edge to browse your favorite websites, you might have noticed the Read aloud this page icon (read aloud page icon in microsoft edge) in the address bar. If you click the icon it will read the texts on the webpage loudly. This is cool. You can also create your own text to speech functionality at the client side using a JavaScript API called Web Speech API.

Here's an example.

<!DOCTYPE html>
<html>
<body>

  <!--Will read this content inside the P element, including the smiley face.-->
  <p id='intro'>
    Hello, I am Arun Banik and welcome to my blog. :-)      
  </p>

</body>
<script>
  let text = document.getElementById('intro').innerHTML;
  const utterText = new SpeechSynthesisUtterance(text);
  window.speechSynthesis.speak(utterText);
</script>
</html>
Try it

It is not re-inventing the wheel. I know this feature is availble with many mordern browsers. Its just that you can have your own custom build text-to-speech functionality. You can customize text utterance by changing the pitch, speed, volume etc.

You may also like... How to "split" a string into Multiple lines in a web page using JavaScript?

The SpeechSynthesis API instructs the browser to convert the texts into speech.

This API is supported by all morden browsers.

Here are few properties of the API that you might like to use.

1) Increase speed of text-to-speech rate

You can control the speed at which the text will be read by using the rate property. For example,

<script>
  let text = 'Hello world, I am Arun Banik';
  const utterText = new SpeechSynthesisUtterance(text);

  utterText.rate = 2;        // the speed at which the text will be read aloud.
  window.speechSynthesis.speak(utterText);
</script>

Learn more about SpeechSynthesisUtterance interface.

2) Text-to-speech using different voices

The texts can be read using different voices like a male voice or a female voice and with different accent.

<!DOCTYPE html>
<html>
<body>

  <!--This drowdown will have different voices.-->
  <select id='selected_voice'></select>
  
  <p id='intro'>
    Hello, I am Arun Banik and welcome to my blog.
  </p>
  
  <input type='button' value='Speak' id='bt_speak' />
</body>
<script>
    bt_speak.addEventListener("click", () => {
        let text = document.getElementById('intro').innerHTML;
        const utterText = new SpeechSynthesisUtterance(text);

        const selectedOption = selected_voice.selectedOptions[0].getAttribute("data-name");

        for (let i = 0; i < voices.length; i++) {
          if (voices[i].name === selectedOption) {
            utterText.voice = voices[i];   // The voice property.
          }
        }
        window.speechSynthesis.speak(utterText);
    });
  

  let voices = [];      // Store available voices in an array. List will vary depending upon browser.

  let setVoices = () => {
    voices = window.speechSynthesis.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);
      
      // add all available voices in the SELECT dropdown list.
      document.getElementById("selected_voice").appendChild(option);
    }
  }

  if ( typeof speechSynthesis !== "undefined" && speechSynthesis.onvoiceschanged !== undefined) 
  {
    speechSynthesis.onvoiceschanged = setVoices;
  }
</script>
</html>
Try it

Happy coding. 🙂

← PreviousNext →