SpeechRecognition example code

I propose to add the following 4 examples to the examples section. Note
that this section is non-normative. These are similar to the examples that
I posted earlier [1] [2], with the results / resultIndex references fixed.
If there's no disagreement, I'll add these to the spec tomorrow.


Using speech recognition to fill an input-field and perform a web search.

  <script type="text/javascript">
    var recognition = new SpeechRecognition();
    recognition.onresult = function(event) {
      if (event.results.length > 0) {
        q.value = event.results[0][0].transcript;
        q.form.submit();
      }
    }
  </script>

  <form action="http://www.example.com/search">
    <input type="search" id="q" name="q" size=60>
    <input type="button" value="Click to Speak"
onclick="recognition.start()">
  </form>



Using speech recognition to fill an options list with alternative speech
results.

    <script type="text/javascript">
      var recognition = new SpeechRecognition();
      recognition.maxAlternatives = 10;
      recognition.onresult = function(event) {
        if (event.results.length > 0) {
          var result = event.results[0];
          for (var i = 0; i < result.length; ++i) {
            var text = result[i].transcript;
            select.options[i] = new Option(text, text);
          }
        }
      }

      function start() {
        select.options.length = 0;
        recognition.start();
      }
    </script>

    <select id="select"></select>
    <button onclick="start()">Click to Speak</button>



Using continuous speech recognition to fill a textarea.

    <textarea id="textarea" rows=10 cols=80></textarea>
    <button id="button" onclick="toggleStartStop()"></button>
    <script type="text/javascript">
      var recognizing;
      var recognition = new SpeechRecognition();
      recognition.continuous = true;
      reset();
      recognition.onend = reset;

      recognition.onresult = function (event) {
        for (var i = resultIndex; i < event.results.length; ++i) {
          if (event.results.final) {
            textarea.value += event.results[i][0].transcript;
          }
        }
      }

      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";
        }
      }
    </script>



Using continuous speech recognition, showing final results in black and
interim results in grey.

    <button id="button" onclick="toggleStartStop()"></button>
    <div style="border:dotted;padding:10px">
      <span id="final_span"></span>
      <span id="interim_span" style="color:grey"></span>
    </div>
    <script type="text/javascript">
      var recognizing;
      var recognition = new SpeechRecognition();
      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>


[1] http://lists.w3.org/Archives/Public/public-speech-api/2012Sep/0108.html
[2] http://lists.w3.org/Archives/Public/public-speech-api/2012Sep/0113.html

/Glen Shires