{"id":6823,"date":"2017-01-17T14:45:51","date_gmt":"2017-01-17T14:45:51","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6823"},"modified":"2019-03-03T07:15:09","modified_gmt":"2019-03-03T07:15:09","slug":"campo-texto-reconocimiento-voz","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/campo-texto-reconocimiento-voz\/","title":{"rendered":"Campo de texto con reconocimiento de voz"},"content":{"rendered":"

En este art\u00edculo vamos a ver lo simple que es crear un campo de texto que permita el reconocimiento de la voz<\/strong>. Esta funcionalidad puede resultar muy \u00fatil para el usuario disponiendo de la posibilidad de poder decir unas palabras mediante la voz para evitar tener que teclear cada letra. Este sistema se podr\u00eda emplear en un buscador para nuestra tienda, en un formulario de contacto o en la implementaci\u00f3n de un chat.<\/p>\n

Como podemos conseguirlo?<\/p>\n

En Javascript tenemos una API que podemos utilizar f\u00e1cilmente en nuestros proyectos para reconocer la voz del usuario<\/strong>.<\/p>\n

Crearemos nuestro campo de texto como solemos hacer habitualmente dentro del formulario correspondiente en cualquier parte del <body>. Por ejemplo:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"search"<\/span> value<\/span>=<\/span>""<\/span> id<\/span>=<\/span>"search_input"<\/span> placeholder=<\/span>"Escribe aqu\u00ed..."<\/span> \/<\/span>><\/span><\/pre><\/div><\/div>\n
En la cabecera <head> de nuestra p\u00e1gina tendremos que incluir la librer\u00eda jQuery, como por ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<script<\/span><\/a> src<\/span>=<\/span>"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.4\/jquery.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
La clave del asunto viene a continuaci\u00f3n. Tambi\u00e9n en la cabecera de tu p\u00e1gina debes a\u00f1adir el siguiente trozo de c\u00f3digo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n    var<\/span> recognition =<\/span> new<\/span> webkitSpeechRecognition(<\/span>)<\/span>;<\/span>\n    recognition.continuous<\/span> =<\/span> true<\/span>;<\/span>\n    recognition.lang<\/span> =<\/span> "es"<\/span>;<\/span>\n \n    $(<\/span>'#search_input'<\/span>)<\/span>.click<\/span>(<\/span>function<\/span>(<\/span>event)<\/span> {<\/span>\n        recognition.start<\/span>(<\/span>)<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span>\n \n    recognition.onresult<\/span> =<\/span> function<\/span> (<\/span>event)<\/span> {<\/span>\n        finalResult =<\/span> ''<\/span>;<\/span>\n        for<\/span> (<\/span>var<\/span> i =<\/span> event.resultIndex<\/span>;<\/span> i <<\/span> event.results<\/span>.length<\/span>;<\/span> ++<\/span>i)<\/span> {<\/span>\n            if<\/span> (<\/span>event.results<\/span>[<\/span>i]<\/span>.isFinal<\/span>)<\/span> {<\/span>\n                finalResult =<\/span> event.results<\/span>[<\/span>i]<\/span>[<\/span>0]<\/span>.transcript<\/span>;<\/span>\n                $(<\/span>'#search_input'<\/span>)<\/span>.val<\/span>(<\/span>finalResult)<\/span>;<\/span>\n            }<\/span>\n        }<\/span>\n    }<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Estamos inicializando la API de reconocimiento de voz de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
var<\/span> recognition =<\/span> new<\/span> webkitSpeechRecognition(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Definimos la continuidad del momento de hablar, establecemos que cuando el usuario deje de hablar, el reconocimiento de voz llega a su fin con:<\/span><\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
recognition.continuous<\/span> =<\/span> true<\/span>;<\/span><\/pre><\/div><\/div>\n
Establecemos el idioma que se debe reconocer. En nuestro caso, nos interesa el espa\u00f1ol:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
recognition.lang<\/span> =<\/span> "es"<\/span>;<\/span><\/pre><\/div><\/div>\n
Cuando el usuario haga click en el campo de texto, empezamos el reconocimiento de voz. Eso lo conseguimos con:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>'#search_input'<\/span>)<\/span>.click<\/span>(<\/span>function<\/span>(<\/span>event)<\/span> {<\/span>\n    recognition.start<\/span>(<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Finalmente, definimos el evento que debe generarse cuando el usuario termina de hablar:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
recognition.onresult<\/span> =<\/span> function<\/span> (<\/span>event)<\/span> {<\/span>\n    finalResult =<\/span> ''<\/span>;<\/span>\n    for<\/span> (<\/span>var<\/span> i =<\/span> event.resultIndex<\/span>;<\/span> i <<\/span> event.results<\/span>.length<\/span>;<\/span> ++<\/span>i)<\/span> {<\/span>\n        if<\/span> (<\/span>event.results<\/span>[<\/span>i]<\/span>.isFinal<\/span>)<\/span> {<\/span>\n            finalResult =<\/span> event.results<\/span>[<\/span>i]<\/span>[<\/span>0]<\/span>.transcript<\/span>;<\/span>\n            $(<\/span>'#search_input'<\/span>)<\/span>.val<\/span>(<\/span>finalResult)<\/span>;<\/span>\n        }<\/span>\n    }<\/span>\n}<\/span>;<\/span><\/pre><\/div><\/div>\n
La variable event.resultIndex contiene las palabras reconocidas por la API. Las recorremos para mostrarlas.<\/p>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n
Inconvenientes<\/strong><\/p>\n