Updated Examples section and added 3 new speech recognition examples.
authorGlen Shires <gshires@google.com>
Wed, 10 Oct 2012 15:02:14 -0700
changeset 49 d04767158d4c
parent 48 154dfa09eeab
child 50 a561a5ec2d65
Updated Examples section and added 3 new speech recognition examples.
speechapi.html
--- a/speechapi.html	Wed Oct 10 13:23:45 2012 -0700
+++ b/speechapi.html	Wed Oct 10 15:02:14 2012 -0700
@@ -401,6 +401,8 @@
       <li><a href="#speechsynthesisvoice"><span class=secno>5.2.6 </span>SpeechSynthesisVoice</a></li>
       <li><a href="#speechsynthesisvoicelist"><span class=secno>5.2.7 </span>SpeechSynthesisVoiceList</a></li>
       <li><a href="#examples"><span class=secno>6 </span>Examples</a></li>
+      <li><a href="#examples-recognition"><span class=secno>6.1 </span>Speech Recognition Examples</a></li>
+      <li><a href="#examples-synthesis"><span class=secno>6.2 </span>Speech Synthesis Examples</a></li>
       <li class=no-num><a href="#acknowledgments">Acknowledgments</a></li>
       <li class=no-num><a href="#references">References</a></li>
     </ul>
@@ -1160,41 +1162,185 @@
 
     <p><em>This section is non-normative.</em></p>
 
+    <h3 id="examples-recognition"><span class=secno>6.1 </span>Speech Recognition Examples</h3>
+
     <div class="example">
-      <div class="exampleHeader">
-        Examples
-      </div>
-
-      <p>Using speech recognition to perform a web search.</p>
-
+      <p>Using speech recognition to fill an input-field and perform a web search.</p>
       <div class="block">
         <div class="blockTitleDiv">
-          <span class="blockTitle">Web search by voice with auto-submit</span>
+          <span class="blockTitle">Example 1</span>
         </div>
 
         <div class="blockContent">
           <pre class="code">
             <code class="html-code">
   &lt;script type="text/javascript"&gt;
-    var sr = new SpeechReco();
-    sr.onresult = function(event) {
-      var q = document.getElementById("q");
-      q.value = event.result[0].transcript;
-      q.form.submit();
+    var recognition = new SpeechRecognition();
+    recognition.onresult = function(event) {
+      if (event.results.length &gt; 0) {
+        q.value = event.results[0][0].transcript;
+        q.form.submit();
+      }
     }
   &lt;/script&gt;
 
   &lt;form action="http://www.example.com/search"&gt;
-  &lt;input type="search" id="q" name="q"&gt;
-  &lt;input type="button" value="Speak" onclick="sr.start()"&gt;
+    &lt;input type="search" id="q" name="q" size=60&gt;
+    &lt;input type="button" value="Click to Speak" onclick="recognition.start()"&gt;
   &lt;/form&gt;
             </code>
           </pre>
         </div>
       </div>
 
-      <p>Using speech synthesis.</p>
+      <p>Using speech recognition to fill an options list with alternative speech results.</p>
+      <div class="block">
+        <div class="blockTitleDiv">
+          <span class="blockTitle">Example 2</span>
+        </div>
 
+        <div class="blockContent">
+          <pre class="code">
+            <code class="html-code">
+    &lt;script type="text/javascript"&gt;
+      var recognition = new SpeechRecognition();
+      recognition.maxAlternatives = 10;
+      recognition.onresult = function(event) {
+        if (event.results.length &gt; 0) {
+          var result = event.results[0];
+          for (var i = 0; i &lt; result.length; ++i) {
+            var text = result[i].transcript;
+            select.options[i] = new Option(text, text);
+          }
+        }
+      }
+
+      function start() {
+        select.options.length = 0;
+        recognition.start();
+      }
+    &lt;/script&gt;
+
+    &lt;select id="select"&gt;&lt;/select&gt;
+    &lt;button onclick="start()"&gt;Click to Speak&lt;/button&gt;
+            </code>
+          </pre>
+        </div>
+      </div>
+
+      <p>Using continuous speech recognition to fill a textarea.</p>
+      <div class="block">
+        <div class="blockTitleDiv">
+          <span class="blockTitle">Example 3</span>
+        </div>
+
+        <div class="blockContent">
+          <pre class="code">
+            <code class="html-code">
+  &lt;textarea id="textarea" rows=10 cols=80&gt;&lt;/textarea&gt;
+  &lt;button id="button" onclick="toggleStartStop()"&gt;&lt;/button&gt;
+
+  &lt;script type="text/javascript"&gt;
+    var recognizing;
+    var recognition = new SpeechRecognition();
+    recognition.continuous = true;
+    reset();
+    recognition.onend = reset;
+
+    recognition.onresult = function (event) {
+      for (var i = resultIndex; i &lt; 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";
+      }
+    }
+  &lt;/script&gt;
+            </code>
+          </pre>
+        </div>
+      </div>
+
+      <p>Using continuous speech recognition, showing final results in black and interim results in grey.</p>
+      <div class="block">
+        <div class="blockTitleDiv">
+          <span class="blockTitle">Example 4</span>
+        </div>
+
+        <div class="blockContent">
+          <pre class="code">
+            <code class="html-code">
+  &lt;button id="button" onclick="toggleStartStop()"&gt;&lt;/button&gt;
+  &lt;div style="border:dotted;padding:10px"&gt;
+    &lt;span id="final_span"&gt;&lt;/span&gt;
+    &lt;span id="interim_span" style="color:grey"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+
+  &lt;script type="text/javascript"&gt;
+    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 &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>
+        </div>
+      </div>
+    </div>
+
+    <h3 id="examples-synthesis"><span class=secno>6.2 </span>Speech Synthesis Examples</h3>
+
+    <div class="example">
+      <p>Spoken text.</p>
       <div class="block">
         <div class="blockTitleDiv">
           <span class="blockTitle">Example 1</span>
@@ -1210,6 +1356,8 @@
           </pre>
         </div>
       </div>
+
+      <p>Spoken text with attributes and events.</p>
       <div class="block">
         <div class="blockTitleDiv">
           <span class="blockTitle">Example 2</span>
@@ -1232,22 +1380,6 @@
       </div>
     </div>
 
-    <p>This API supports all of the examples in the <a href="http://www.w3.org/2005/Incubator/htmlspeech/XGR-htmlspeech/">HTML Speech Incubator Group Final Report</a> <a href="#ref-1">[1]</a> that are within the scope of the JavaScript API and are relevant to the <a href="#use_cases">Section 3 Use Cases</a>, with minimal or no changes.
-    Specifically, the following are supported from <a href="http://www.w3.org/2005/Incubator/htmlspeech/XGR-htmlspeech-20111206/#api_examples">Section 7.1.7</a>.</p>
-
-    <ul>
-      <li>Speech Web Search JS API Only (except for the non-essential aspect speedVsAccuracy)</li>
-      <li>Web search by voice, with auto-submit</li>
-      <li>Web search by voice, with "Did you say..."</li>
-      <li>Speech translator</li>
-      <li>Speech shell</li>
-      <li>Turn-by-turn navigation</li>
-      <li>Domain Specific Grammars Contingent on Earlier Inputs</li>
-      <li>Speech Enabled Email Client (except for the non-essential aspect speedVsAccuracy)</li>
-      <li>Simple Multimodal Example JS API Only</li>
-      <li>Speech XG Translating Example</li>
-    </ul>
-
     <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
 
     <p>The members of the HTML Speech Incubator Group, and the corresponding Final Report <a href="#ref-1">[1]</a>, created the basis for this specification.</p>