Updated Examples section and added 3 new speech recognition examples.
--- 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">
<script type="text/javascript">
- 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 > 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">
- <input type="button" value="Speak" onclick="sr.start()">
+ <input type="search" id="q" name="q" size=60>
+ <input type="button" value="Click to Speak" onclick="recognition.start()">
</form>
</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">
+ <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>
+ </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">
+ <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>
+ </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">
+ <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>
+ </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>