Ajoutez de la reconnaissance vocale à votre site.

Parler au machine et se faire comprendre, cela fait penser à de la science fiction. Pourtant la reconnaissance vocale existe et fonctionne aujourd’hui très bien.
reconnaissance vocale
Dans cet article nous allons voir comment l’utiliser et l’intégrer à votre blog ou votre site.
Pour ce faire nous emploierons une spécification HTML5 (x-webkit-speech), très facile à utiliser. Malheureusement, elle n’est implémentée que par Google Chrome, le navigateur de Google. Si vous n’avez pas Chrome et que la reconnaissance vocale vous intéresse, alors il est temps d’installer Google Chrome.Vous avez également besoin d’un micro branché…

  • Reconnaissance vocale dans un champ de saisie.

Il suffit de placer la balise ci-dessous où vous voulez faire apparaître la saisie vocale et c’est tout.
Il faut cliquer sur le micro pour enregistrer.

<input x-webkit-speech>


 

  •   Reconnaissance vocale dans un cadre plus grand.(textarea)

Intégrez ce code pour écrire entre les balises <textarea> et </textarea>

<script type="text/javascript">
  function transcribe(words) {
    document.getElementById("speech").value = words;
    document.getElementById("micro").value = "";
    document.getElementById("speech").focus();
  }
</script>

<textarea cols="50" id="speech" ></textarea>
<input style="width:15px;height:20px;border:0px;bacground-color:transparent;"
  id="mic" onwebkitspeechchange="transcribe(this.value)" x-webkit-speech>

 

Pour que cela fonctionne en aperçu sous WordPress, il faut réactualiser l’aperçu (F5)


  • Reconnaissance vocale dans un champ de recherche Google

Vous pouvez également intégrer la reconnaissance vocale à votre champ de recherche Google, ce qui peut-être un plus pour vos visiteurs.

 <form method="get" action="http://www.google.com/search">
  <input type="text" size="30" name="q" x-webkit-speech/>
  <input type="submit" value="Google Search" />
 </form>

 




En relation avec cet article

3 Comments

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lire plus :
cadre css
Comment encadrer un texte avec des arrondis en CSS ?

Vous avez envie d'encadrer des textes pour les embellir sans avoir recourt à des images ? CSS3 permet de réaliser...

menu CSS javascript
10 effets javascript et CSS pour menus

Vous cherchez quelques petits codes pour animer vos menus et rendre vos liens textes plus funs ? Dans ce petit...

monosnap
Un freeware pour des screencasts et screenshots enrichis

Vous souhaitez enrichir vos captures d'écran images ou vidéos, monosnap vous intéressera probablement. monosnap est un petit freeware avec de grandes...

Fermer