JavaScript - Como sintetizar voz usando a web speech API (Comentado)

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <title>Web Speech API - Sintetizador</title>
  </head>
  <body>
    <h1>Web Speech API - Sintetizador</h1>
    <p>Digite o texto no campo de entrada e clique no botão.</p>
    <input id="txt" type="text" size="50"/>
    <button id="play" type="button">Play</button>
    <script>
      // Instanciando o módulo de síntese
      const synth = window.speechSynthesis;

      // Função talk que acessa o valor digitado no input e cria um áudio para apresentá-lo
      function talk() {

        // Acessando o valor do input e atribuindo na variável t
        let t = document.getElementById('txt').value;

        // Acessando as vozes disponíveis no navegador e atribuindo na variável voices
        let voices = synth.getVoices();

        // Condição que verifica se existe voz disponível
        if (voices.length !== 0) {

          // Criando um enunciado de voz e atribuindo à variável msg.
          let msg = new SpeechSynthesisUtterance();

          // Seleciono a primeira voz disponível e configuro na mensagem, que é a variável msg.
          msg.voice = voices[0];

          // Configuro a velocidade 1.
          msg.rate = 1;

          // Configuro o tom de voz 1.
          msg.pitch = 1;

          // Atribuo o valor da variável t como texto para síntese de voz.
          msg.text = t;

          // Configuro a linguagem como português.
          msg.lang = "pt-BR";

          // Chamo a função para reproduzir a mensagem.
          synth.speak(msg);
        }
      }

      // Crio o evento que chama a função talk ao clicar no botão.
      document.getElementById("play").onclick = talk; // evento
    </script>
  </body>
</html>