webkitSpeechRecognition does not show interim results

Question

I'm trying to implement this speech recognition service as mentioned HERE and display results with INTERIM (the text that alternates before the final result) similar to THIS 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.

  <span id="final_span"></span>
   <span id="interim_span" style="color: grey"></span>

   <button id="button" type="button" onclick="toggleStartStop()"></button>

And the Javascript:

 <script type="text/javascript">
                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 < 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 = "";
                    }
                }
            </script>

What am I doing wrong? I need to create the exact same thing as THIS

Answer 1

According to the documentation

You need

    recognition.interimResults = true;

not like in your current source

    recognition.interim = true;

You can also figure that out if you check the source code of the page you linked.