---
title: SpeechRecognition
slug: Web/API/SpeechRecognition
translation_of: Web/API/SpeechRecognition
---
<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>

<p><strong><code>SpeechRecognition</code></strong> est l'interface contrôleur du service de reconnaissance de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a>; elle gère également les {{domxref("SpeechRecognitionEvent")}} envoyés par le service de reconnaissance.</p>

<h2 id="Constructeur">Constructeur</h2>

<dl>
 <dt>{{domxref("SpeechRecognition.SpeechRecognition()")}}</dt>
 <dd>Crée un nouvel objet <code>SpeechRecognition</code></dd>
</dl>

<h2 id="Propriétés">Propriétés</h2>

<p><em><code>SpeechRecognition</code><code><em> </em></code>hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}.</em></p>

<dl>
 <dt>{{domxref("SpeechRecognition.grammars")}}</dt>
 <dd>Retourne et définit une collection d'objets {{domxref("SpeechGrammar")}} représentant les grammaires qui seront comprises par <code>SpeechRecognition</code>.</dd>
 <dt>{{domxref("SpeechRecognition.lang")}}</dt>
 <dd>Retourne et définit la langue de  <code>SpeechRecognition</code>. Si elle n'est pas spécifiée, prend la valeur par défaut du HTML {{htmlattrxref("lang","html")}} ou le paramètre de langue du user agent si celle-ci n'est pas défini non plus.</dd>
 <dt>{{domxref("SpeechRecognition.continuous")}}</dt>
 <dd>Contrôle si la reconnaissance est continue, ou retourne seulement un seul résultat. Par défaut retourne un seul résultat (<code>false</code>.)</dd>
 <dt>{{domxref("SpeechRecognition.interimResults")}}</dt>
 <dd>Contrôle si les résultats intermédiaires doivent être retournés (<code>true</code>) ou pas (<code>false</code>.) Les résultats intermédiaires sont des résultats qui ne sont pas encore définitifs. (e.x. ou la propriété {{domxref("SpeechRecognitionResult.isFinal")}}  est <code>false</code>.)</dd>
 <dt>{{domxref("SpeechRecognition.maxAlternatives")}}</dt>
 <dd>Règle le nombre maximum de {{domxref("SpeechRecognitionAlternative")}} (d'alternatives) fourni par résultat. La valeur par défaut est 1.</dd>
 <dt>{{domxref("SpeechRecognition.serviceURI")}}</dt>
 <dd>Spécifie l'emplacement du service de reconnaissance vocale utilisé par <code>SpeechRecognition</code> pour traiter la reconnaissance proprement dite. La valeur par défaut le chemin par défaut du user agent.</dd>
</dl>

<h3 id="Event_handlers">Event handlers</h3>

<dl>
 <dt>{{domxref("SpeechRecognition.onaudiostart")}}</dt>
 <dd>Déclenché lorsque l'agent utilisateur commence à capturer le son.</dd>
 <dt>{{domxref("SpeechRecognition.onaudioend")}}</dt>
 <dd>Déclenché lorsque l'agent utilisateur a terminé la capture audio.</dd>
 <dt>{{domxref("SpeechRecognition.onend")}}</dt>
 <dd>Déclenché lorsque le service de reconnaissance vocale est déconnecté.</dd>
 <dt>{{domxref("SpeechRecognition.onerror")}}</dt>
 <dd>Déclenché en cas d'erreur de reconnaissance vocale.</dd>
 <dt>{{domxref("SpeechRecognition.onnomatch")}}</dt>
 <dd>Déclenché lorsque le service de reconnaissance vocale retourne un résultat final sans concordance significative. Il peut s'agir d'un certain degré de reconnaissance, qui ne correspond pas ou ne dépasse le seuil de {{domxref("SpeechRecognitionAlternative.confidence","confidence")}}.</dd>
 <dt>{{domxref("SpeechRecognition.onresult")}}</dt>
 <dd>Déclenché lorsque le service de reconnaissance vocale retourne un résultat - un mot ou une expression a donc été reconnu(e) positivement et cela a été communiqué à l'application.</dd>
 <dt>{{domxref("SpeechRecognition.onsoundstart")}}</dt>
 <dd>Déclenché lorsqu'un son - parole reconnaissable ou non - a été détecté.</dd>
 <dt>{{domxref("SpeechRecognition.onsoundend")}}</dt>
 <dd>Déclenché lorsque le son - parole reconnaissable ou non - n'est plus détecté.</dd>
 <dt>{{domxref("SpeechRecognition.onspeechstart")}}</dt>
 <dd>Déclenché lorsque du son à été reconnu par le service de reconnaissance vocale comme de la parole.</dd>
 <dt>{{domxref("SpeechRecognition.onspeechend")}}</dt>
 <dd>Déclenché lorsque la parole reconnue par le service de reconnaissance vocale a cesse d'être détectée.</dd>
 <dt>{{domxref("SpeechRecognition.onstart")}}</dt>
 <dd>Déclenché lorsque le service de reconnaissance vocale commence à écouter l'audio entrant, dans le but de reconnaître les grammaires associées à la (reconnaissance vocale) <code>SpeechRecognition</code> actuelle.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em><code>SpeechRecognition</code> also inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p>

<dl>
 <dt>{{domxref("SpeechRecognition.abort()")}}</dt>
 <dd>Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a {{domxref("SpeechRecognitionResult")}}.</dd>
 <dt>{{domxref("SpeechRecognition.start()")}}</dt>
 <dd>Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</dd>
 <dt>{{domxref("SpeechRecognition.stop()")}}</dt>
 <dd>Stops the speech recognition service from listening to incoming audio, and attempts to return a {{domxref("SpeechRecognitionResult")}} using the audio captured so far.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>In our simple <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a> example, we create a new <code>SpeechRecognition</code> object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the <code>SpeechRecognition</code> instance using the {{domxref("SpeechRecognition.grammars")}} property.</p>

<p>After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires,  we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour.</p>

<pre class="brush: js">var grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
//recognition.continuous = false;
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;

var diagnostic = document.querySelector('.output');
var bg = document.querySelector('html');

document.body.onclick = function() {
  recognition.start();
  console.log('Ready to receive a color command.');
}

recognition.onresult = function(event) {
  var color = event.results[0][0].transcript;
  diagnostic.textContent = 'Result received: ' + color;
  bg.style.backgroundColor = color;
}</pre>

<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', '#speechreco-section', 'SpeechRecognition')}}</td>
   <td>{{Spec2('Web Speech API')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(33)}}{{property_prefix("webkit")}} <sup>[1]</sup></td>
   <td>{{CompatNo}} <sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>continuous</code></td>
   <td>{{CompatChrome(33)}} <sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}[1]</td>
   <td>{{CompatGeckoMobile(44)}}</td>
   <td>2.5</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>continuous</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}[1]</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<ul>
 <li>[1] Speech recognition interfaces are currently prefixed in Chrome, so you'll need to prefix interface names appropriately, e.g. <code>webkitSpeechRecognition</code>; You'll also need to serve your code through a web server for recognition to work.</li>
 <li>[2] Can be enabled via the <code>media.webspeech.recognition.enable</code> flag in <a>about:config</a> on mobile. Not implemented at all on Desktop Firefox — see {{bug(1248897)}}.</li>
</ul>

<h3 id="Firefox_OS_permissions">Firefox OS permissions</h3>

<p>To use speech recognition in an app, you need to specify the following permissions in your <a href="/en-US/docs/Web/Apps/Build/Manifest">manifest</a>:</p>

<pre class="brush: json">"permissions": {
  "audio-capture" : {
    "description" : "Audio capture"
  },
  "speech-recognition" : {
    "description" : "Speech recognition"
  }
}</pre>

<p>You also need a privileged app, so you need to include this as well:</p>

<pre class="brush: json">  "type": "privileged"</pre>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
</ul>