title: Getting the list of voices in speechSynthesis (Web Speech API)
body: <p>Following HTML shows empty array in console on first click:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script&gt;
              function test(){
                  console.log(window.speechSynthesis.getVoices())
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;a href="#" onclick="test()"&gt;Test&lt;/a&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In second click you will get the expected list.</p>
  
  <p>If you add <code>onload</code> event to call this function (<code>&lt;body onload="test()"&gt;</code>), then you can get correct result on first click. Note that the first call on <code>onload</code> still doesn't work properly. It returns empty on page load but works afterward.</p>
  
  <p><strong>Questions:</strong></p>
  
  <p>Since it might be <a href="https://code.google.com/p/chromium/issues/detail?id=340160" rel="noreferrer">a bug</a> in beta version, I gave up on "Why" questions. </p>
  
  <p>Now, the question is if you want to access <code>window.speechSynthesis</code> on page load:</p>
  
  <ul>
  <li>What is the best hack for this issue?</li>
  <li>How can you make sure it will load <code>speechSynthesis</code>, on page load? </li>
  </ul>
  
  <p><strong>Background and tests:</strong></p>
  
  <p>I was testing the new features in Web Speech API, then I got to this problem in my code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      // Browser support messages. (You might need Chrome 33.0 Beta)
      if (!('speechSynthesis' in window)) {
        alert("You don't have speechSynthesis");
      }
  
      var voices = window.speechSynthesis.getVoices();
      console.log(voices) // []
  
      $("#test").on('click', function(){
          var voices = window.speechSynthesis.getVoices();
          console.log(voices); // [SpeechSynthesisVoice, ...]
      });
  });
  &lt;/script&gt;
  &lt;a id="test" href="#"&gt;click here if 'ready()' didn't work&lt;/a&gt;
  </code></pre>
  
  <p>My question was: why does <code>window.speechSynthesis.getVoices()</code> return empty array, after page is loaded and <code>onready</code> function is triggered? As you can see if you click on the link, same function returns an array of available voices of Chrome by <code>onclick</code> triger?</p>
  
  <p>It seems Chrome loads <code>window.speechSynthesis</code> after the page load!</p>
  
  <p>The problem is not in <code>ready</code> event. If I remove the line <code>var voice=...</code> from <code>ready</code> function, for first click it shows empty list in console. But the second click works fine.</p>
  
  <p>It seems <code>window.speechSynthesis</code> needs more time to load after first call. You need to call it twice! But also, you need to wait and let it load before second call on <code>window.speechSynthesis</code>. For example, following code shows two empty arrays in console if you run it for first time:</p>
  
  <pre><code>// First speechSynthesis call
  var voices = window.speechSynthesis.getVoices();
  console.log(voices);
  
  // Second speechSynthesis call
  voices = window.speechSynthesis.getVoices();
  console.log(voices);
  </code></pre>