1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: Web Speech API
slug: Web/API/Web_Speech_API
tags:
- API
- Experimental
- Landing
- NeedsTranslation
- Reference
- TopicStub
- Web Speech API
- recognition
- speech
- synthesis
translation_of: Web/API/Web_Speech_API
---
<div>{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}</div>
<div class="summary">
<p>The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Asynchronous Speech Recognition.)</p>
</div>
<h2 id="Web_Speech_Concepts_and_Usage">Web Speech Concepts and Usage</h2>
<p>The Web Speech API makes web apps able to handle voice data. There are two components to this API:</p>
<ul>
<li>Speech recognition is accessed via the {{domxref("SpeechRecognition")}} interface, which provides the ability to recognize voice context from an audio input (normally via the device's default speech recognition service) and respond appropriately. Generally you'll use the interface's constructor to create a new {{domxref("SpeechRecognition")}} object, which has a number of event handlers available for detecting when speech is input through the device's microphone. The {{domxref("SpeechGrammar")}} interface represents a container for a particular set of grammar that your app should recognise. Grammar is defined using <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>.)</li>
<li>Speech synthesis is accessed via the {{domxref("SpeechSynthesis")}} interface, a text-to-speech component that allows programs to read out their text content (normally via the device's default speech synthesiser.) Different voice types are represented by {{domxref("SpeechSynthesisVoice")}} objects, and different parts of text that you want to be spoken are represented by {{domxref("SpeechSynthesisUtterance")}} objects. You can get these spoken by passing them to the {{domxref("SpeechSynthesis.speak()")}} method.</li>
</ul>
<p>For more details on using these features, see <a href="/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a>.</p>
<h2 id="Web_Speech_API_Interfaces">Web Speech API Interfaces</h2>
<h3 id="Speech_recognition">Speech recognition</h3>
<dl>
<dt>{{domxref("SpeechRecognition")}}</dt>
<dd>The controller interface for the recognition service; this also handles the {{domxref("SpeechRecognitionEvent")}} sent from the recognition service.</dd>
<dt>{{domxref("SpeechRecognitionAlternative")}}</dt>
<dd>Represents a single word that has been recognised by the speech recognition service.</dd>
<dt>{{domxref("SpeechRecognitionError")}}</dt>
<dd>Represents error messages from the recognition service.</dd>
<dt>{{domxref("SpeechRecognitionEvent")}}</dt>
<dd>The event object for the {{event("result")}} and {{event("nomatch")}} events, and contains all the data associated with an interim or final speech recognition result.</dd>
<dt>{{domxref("SpeechGrammar")}}</dt>
<dd>The words or patterns of words that we want the recognition service to recognize.</dd>
<dt>{{domxref("SpeechGrammarList")}}</dt>
<dd>Represents a list of {{domxref("SpeechGrammar")}} objects.</dd>
<dt>{{domxref("SpeechRecognitionResult")}}</dt>
<dd>Represents a single recognition match, which may contain multiple {{domxref("SpeechRecognitionAlternative")}} objects.</dd>
<dt>{{domxref("SpeechRecognitionResultList")}}</dt>
<dd>Represents a list of {{domxref("SpeechRecognitionResult")}} objects, or a single one if results are being captured in {{domxref("SpeechRecognition.continuous","continuous")}} mode.</dd>
</dl>
<h3 id="Speech_synthesis">Speech synthesis</h3>
<dl>
<dt>{{domxref("SpeechSynthesis")}}</dt>
<dd>The controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.</dd>
<dt>{{domxref("SpeechSynthesisErrorEvent")}}</dt>
<dd>Contains information about any errors that occur while processing {{domxref("SpeechSynthesisUtterance")}} objects in the speech service.</dd>
<dt>{{domxref("SpeechSynthesisEvent")}}</dt>
<dd>Contains information about the current state of {{domxref("SpeechSynthesisUtterance")}} objects that have been processed in the speech service.</dd>
<dt>{{domxref("SpeechSynthesisUtterance")}}</dt>
<dd>Represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)</dd>
</dl>
<dl>
<dt>{{domxref("SpeechSynthesisVoice")}}</dt>
<dd>Represents a voice that the system supports. Every <code>SpeechSynthesisVoice</code> has its own relative speech service including information about language, name and URI.</dd>
<dt>{{domxref("Window.speechSynthesis")}}</dt>
<dd>Specced out as part of a <code>[NoInterfaceObject]</code> interface called <code>SpeechSynthesisGetter</code>, and Implemented by the <code>Window</code> object, the <code>speechSynthesis</code> property provides access to the {{domxref("SpeechSynthesis")}} controller, and therefore the entry point to speech synthesis functionality.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>The <a href="https://github.com/mdn/web-speech-api/">Web Speech API repo</a> on GitHub contains demos to illustrate speech recognition and synthesis.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Web Speech API')}}</td>
<td>{{Spec2('Web Speech API')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<h3 id="SpeechRecognition"><code>SpeechRecognition</code></h3>
<div>
<p>{{Compat("api.SpeechRecognition", 0)}}</p>
<h3 id="SpeechSynthesis"><code>SpeechSynthesis</code></h3>
<p>{{Compat("api.SpeechSynthesis", 0)}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a></li>
<li><a href="http://www.sitepoint.com/talking-web-pages-and-the-speech-synthesis-api/">SitePoint article</a></li>
<li><a href="http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API">HTML5Rocks article</a></li>
<li><a href="http://aurelio.audero.it/demo/speech-synthesis-api-demo.html">Demo</a> [aurelio.audero.it]</li>
</ul>
</div>
|
