How to Make the Browser Read Text Aloud in JavaScript【speechSynthesis】

How to Make the Browser Read Text Aloud in JavaScript | Using speechSynthesis with Sample Code

This page explains how to make the browser read text aloud using window.speechSynthesis.speak().
You can retrieve the list of available voices with window.speechSynthesis.getVoices() and choose any voice you like.
Both the speaking rate and pitch can be adjusted.
This API is useful when you want to add text‑to‑speech functionality to a web page.
With the sample code below, you can easily implement a feature where the browser speaks the text you enter.
It’s especially handy when adding narration (article reading) or text‑to‑speech features (voice assistant) to your website.

Enter the text you want spoken and press the “Speak” button

In this demo, pressing the “Speak” button will read aloud the text you enter in real time.
Using the speechSynthesis API, you can also choose your preferred voice.

Source Code

<input type="text" id="speech_text" value="The browser will speak the text entered here" size="50"><br>
<input type="button" id="speech_button" value="Speak"> 			

<script>
var voices = [];
function speech(){
  const uttr = new SpeechSynthesisUtterance(document.getElementById("speech_text").value);

  // Speaking speed: 0.0 (slow) – 1.0 (normal) – 2.0 (fast)
  uttr.rate = 1.0;

  // Pitch (voice height): 0.0 (low) – 1.0 (normal) – 2.0 (high)
  uttr.pitch = 1.0;

  // Function called when speech has finished
  uttr.onend = function(){
    // Safari on iOS 14.7.1 does not fire this event
    //alert("Speech finished");
  }

  // Japanese voices can be selected from the following list.
  // If not selected, the default voice will be used.
  /*
  uttr.voice = window.speechSynthesis.getVoices().filter(
    //voice => voice.name === 'Microsoft Haruka Desktop - Japanese' // Firefox, Chrome
    //voice => voice.name === 'Microsoft Nanami Online (Natural) - Japanese (Japan)' // Edge only
    //voice => voice.name === 'Microsoft Ayumi - Japanese (Japan)' // Edge, Chrome
    //voice => voice.name === 'Microsoft Haruka - Japanese (Japan)' // Edge, Chrome
    //voice => voice.name === 'Microsoft Ichiro - Japanese (Japan)' // Edge, Chrome
    //voice => voice.name === 'Microsoft Sayaka - Japanese (Japan)' // Edge, Chrome
  )[0];
  */
  // If you want to select English Voice.
  uttr.voice=window.speechSynthesis.getVoices().filter(
    voice => (voice.name.indexOf("English")!==-1)
  )[0];

  window.speechSynthesis.cancel();
  // Speak the text
  window.speechSynthesis.speak(uttr);

  // Pause speech
  //window.speechSynthesis.pause();
  // Resume speech
  //window.speechSynthesis.resume();
  // Stop speech
  //window.speechSynthesis.cancel();
}

window.addEventListener("load", function(){
  // When the button is pressed, call the "speech" function
  document.getElementById("speech_button").addEventListener("click", speech);

  // Preload the list of available voices
  if (typeof window.speechSynthesis.onvoiceschanged === "undefined" ||
      window.speechSynthesis.onvoiceschanged === null) {

    window.speechSynthesis.onvoiceschanged = function(){
      setTimeout(function(){
        voices = window.speechSynthesis.getVoices();
        if (voices.length > 0) {
          // Output the list of voices to the console (optional)
          for (let i = 0; i < voices.length; i++) {
            console.log(voices[i].name);
          }
          // Enable the button once voices are available
          document.getElementById("speech_button").removeAttribute("disabled");
          document.getElementById("speech_button").parentNode.classList.remove("ui-state-disabled");
        }
      }, 100);
    }

  } else {
    setTimeout(function(){
      voices = window.speechSynthesis.getVoices();
      if (voices.length > 0) {
        // Output the list of voices to the console (optional)
        for (let i = 0; i < voices.length; i++) {
          console.log(voices[i].name);
        }
        // Enable the button once voices are available
        document.getElementById("speech_button").removeAttribute("disabled");
        document.getElementById("speech_button").parentNode.classList.remove("ui-state-disabled");
      }
    }, 100);
  }
});
</script>