Speech Recognition over internet (HTML5)

Vous avez surement déjà testé un logiciel de dictée vocale comme Dragon NaturallySpeaking ou encore la dictée vocale native de Mountain LionFigurez vous qu’il est désormais possible, avec la magie du HTML5, d’activer la reconnaissance vocale sur votre sites internet en 2 minutes.

La fonctionnalité est assez impressionnante quand on la retrouve sur le web.

Vous pourrez donc, si vous le souhaitez, intégrer la dictée vocale sur votre blog, en quelques secondes grâce à ces quelques lignes de code. Si vous le souhaitez, vous pouvez même tester le rendu via les formulaires ci-dessous : ils sont fonctionnels.

Pour activer la reconnaissance vocale sur un champ html input (champ de recherche, ou commentaire par exemple)

Simple comme bonjour, il suffit d’ajouter l’attribut x-webkit-speech à votre champ texte…

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

Essayer la démo : cliquez sur le micro, parlez, puis attendez le silence ou validez avec la touche « Entrée »

Activer la reconnaissance vocale internet par pression sur un bouton externe

Simple et efficace : grâce à javascript, on positionne le focus sur le champs à remplir via la parole.

<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 id="mic" onwebkitspeechchange="transcribe(this.value)" x-webkit-speech>

Testez en cliquant sur la représentation du micro (et non pas le micro)


Changer la langue du module de reconnaissance vocal internet

Pour changer la langue du module de reconnaissance vocale, il faudra simplement ajouter lang=“fr” ou autre lang=“es” à coté du x-webkit-speech. Par défaut, la « traduction » sera réalisée en anglais.

Attention toutefois : actuellement, seul le navigateur Google Chrome implémente la fonction HTML5 de reconnaissance vocale…

En savoir plus sur le « Speech Input API » du W3C.

[Source]

Vous aimez cet article ? Partagez le.

By TechRevolutions| 1 Comment | Développement, Tutoriaux
2