title: webkitSpeechRecognition does not show interim results
body: <p>I'm trying to implement this speech recognition service as mentioned <a href="http://lists.w3.org/Archives/Public/public-speech-api/2012Oct/0032.html" rel="nofollow">HERE</a> and display results with INTERIM (the text that alternates before the final result) similar to <a href="https://www.google.com/intl/en/chrome/demos/speech.html" rel="nofollow">THIS</a> example. You can see that the text alternates before landing on a final result. The tutorial I'm following (first link) gives an example to implement this feature as well, however it just gives me the final answer and does not show that word iteration animation. </p>
  
  <pre><code>  &lt;span id="final_span"&gt;&lt;/span&gt;
     &lt;span id="interim_span" style="color: grey"&gt;&lt;/span&gt;
  
     &lt;button id="button" type="button" onclick="toggleStartStop()"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>And the Javascript:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
                  var recognizing;
                  var recognition = new webkitSpeechRecognition();
                  recognition.continuous = true;
                  recognition.interim = true;
                  reset();
                  recognition.onend = reset;
  
                  recognition.onresult = function (event) {
                      var final = "";
                      var interim = "";
                      for (var i = 0; i &lt; event.results.length; ++i) {
                          if (event.results[i].final) {
                              final += event.results[i][0].transcript;
                          } else {
                              interim += event.results[i][0].transcript;
                          }
                      }
                      final_span.innerHTML = final;
                      interim_span.innerHTML = interim;
                  }
  
                  function reset() {
                      recognizing = false;
                      button.innerHTML = "Click to Speak";
                  }
  
                  function toggleStartStop() {
                      if (recognizing) {
                          recognition.stop();
                          reset();
                      } else {
                          recognition.start();
                          recognizing = true;
                          button.innerHTML = "Click to Stop";
                          final_span.innerHTML = "";
                          interim_span.innerHTML = "";
                      }
                  }
              &lt;/script&gt;
  </code></pre>
  
  <p>What am I doing wrong? I need to create the exact same thing as <a href="https://www.google.com/intl/en/chrome/demos/speech.html" rel="nofollow">THIS</a></p>