modified speech.js

speech.js

$(function() {
  // initialize select for materialize
  $("select").formSelect();

  function populateVoiceList() {
    let voices = window.speechSynthesis.getVoices();
    var voiceList = "";
    for (i = 0; i < voices.length; i++) {
      console.log(voices[i].name);
      voiceList += `<option value="${i}">${voices[i].name} (${voices[i].lang})</option>`;
    }
    $("#tts_voice").html("");
    $("#tts_voice").append(voiceList);
    // need to reinitialize select after dynamic changes in materialize :(
    $("select").formSelect();
  }

  // on click of button we read the text from input field
  $(document).on("click", "#tts_button", function() {
    let text = $("#tts_input")
      .val()
      .trim();
    // just in the below 2 lines of code magic happens
    const speak = new SpeechSynthesisUtterance(text);
    //add voice
    let voiceSelected = $("#tts_voice").val();
    speak.voice = window.speechSynthesis.getVoices()[voiceSelected];
    speechSynthesis.speak(speak);
    $("#tts_input").val("");
  });

  //second part lets add voices
  populateVoiceList();

  //why the below if
  /* 
  voiceschanged: Fired when the contents of the SpeechSynthesisVoiceList, that the getVoices method will return, have changed. Examples include: server-side synthesis where the list is determined asynchronously, or when client-side voices are installed/uninstalled.
  */
  //inshort the voice list is loaded asynchronously so once it is loaded it fires a onvoicechanged event
  if (
    typeof speechSynthesis !== "undefined" &&
    speechSynthesis.onvoiceschanged !== undefined
  ) {
    speechSynthesis.onvoiceschanged = populateVoiceList;
  }
});