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>

 


3 Comments

Répondre à Romain Annuler la réponse

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire plus :
html-en-pdf
8 sites pour convertir des pages HTML en PDF.

Convertir en ligne un site web en HTML en un fichier PDF à partir d'une adresse url, c'est possible et...

galaxie
Tutoriel : créer un effet de parallaxe avec jQuery

Vous avez certainement déjà visité un site en une seule page ou les articles se succèdent les uns à la...

logos outils web
8 sites pour créer des logos gratuits

Toutes les marques ont un logo, alors pourquoi pas vous ? la création de logos pour un site web ou...

Fermer