title: How to change voice in Speech Synthesis?
body: <p>I am trying out a simple example with <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis" rel="noreferrer">Speechsynthesis</a>.</p>
  
  <pre><code>&lt;script&gt;
  
  voices = window.speechSynthesis.getVoices()
  var utterance = new SpeechSynthesisUtterance("Hello World");
  utterance.voice = voices[4];
  utterance.lang = voices[4].lang;
  window.speechSynthesis.speak(utterance);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>But this gives an error that voices is undefined. I found that getVoices() is loaded async. I saw <a href="https://stackoverflow.com/a/22978802/1358676">this</a> answer and updated my code as shown below to use callback.</p>
  
  <pre><code>&lt;script&gt;
  window.speechSynthesis.onvoiceschanged = function() {
  voices = window.speechSynthesis.getVoices()
  var utterance = new SpeechSynthesisUtterance("Hello World");
  utterance.voice = voices[4];
  utterance.lang = voices[4].lang;
  window.speechSynthesis.speak(utterance);
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>But due to some strange reason, the text is spoken three times instead of one. How can I fix this code?</p>