Ajoutez de la reconnaissance vocale à votre site.
|
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>
Merci pour cet article ! Je voudrais aussi vous proposer un plugin jQuery qui en aidera, j’espère, à manipuler les résultats de la reconnaissance vocales sur votre site web ! Il s’appelle jQuery SpeechHelper et est open source !
Télécharger la package ici :
+
R.
Le plugin jQuery a l’air bien. Je vais le tester. Merci pour le l’info. 🙂