Campo de texto con reconocimiento de voz
En este artículo vamos a ver lo simple que es crear un campo de texto que permita el reconocimiento de la voz. Esta funcionalidad puede resultar muy útil para el usuario disponiendo de la posibilidad de poder decir unas palabras mediante la voz para evita17/01/2017
En este artículo vamos a ver lo simple que es crear un campo de texto que permita el reconocimiento de la voz. Esta funcionalidad puede resultar muy útil 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ía emplear en un buscador para nuestra tienda, en un formulario de contacto o en la implementación de un chat.
Como podemos conseguirlo?
En Javascript tenemos una API que podemos utilizar fácilmente en nuestros proyectos para reconocer la voz del usuario.
Crearemos nuestro campo de texto como solemos hacer habitualmente dentro del formulario correspondiente en cualquier parte del <body>. Por ejemplo:
<input type="search" value="" id="search_input" placeholder="Escribe aquí..." />En la cabecera <head> de nuestra página tendremos que incluir la librería jQuery, como por ejemplo:
La clave del asunto viene a continuación. También en la cabecera de tu página debes añadir el siguiente trozo de código:
$(document).ready(function() {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.lang = "es";
$('#search_input').click(function(event) {
recognition.start();
});
recognition.onresult = function (event) {
finalResult = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
finalResult = event.results[i][0].transcript;
$('#search_input').val(finalResult);
}
}
};
});Estamos inicializando la API de reconocimiento de voz de la siguiente forma:
var recognition = new webkitSpeechRecognition();Definimos la continuidad del momento de hablar, establecemos que cuando el usuario deje de hablar, el reconocimiento de voz llega a su fin con:
recognition.continuous = true;Establecemos el idioma que se debe reconocer. En nuestro caso, nos interesa el español:
recognition.lang = "es";Cuando el usuario haga click en el campo de texto, empezamos el reconocimiento de voz. Eso lo conseguimos con:
$('#search_input').click(function(event) {
recognition.start();
});Finalmente, definimos el evento que debe generarse cuando el usuario termina de hablar:
recognition.onresult = function (event) {
finalResult = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
finalResult = event.results[i][0].transcript;
$('#search_input').val(finalResult);
}
}
};La variable event.resultIndex contiene las palabras reconocidas por la API. Las recorremos para mostrarlas.
Inconvenientes
- No funciona en dispositivos móviles
- En algunos navegadores tampoco acaba de funcionar
Si sabéis de algún plugin o script que permita reconocer la voz en todos los dispositivos y navegadores, no dudes en enviarnos un comentario con esta información.
Press Release
Publicado el 25/01/2019 14:50Gracias, muy interesante. No tenia ni idea de que se podia hacer esto tan facilmente, lastima que no funcione con Firefox.
David Calderon
Publicado el 10/06/2019 21:42muy buen aporte, Felicidades¡¡¡
Darhiel
Publicado el 05/11/2020 23:46Gracias me servirá de mucho, además una observación, si funciona en móviles, únicamente que por HTTPS.
Rene P
Publicado el 03/03/2021 20:41Saludos, un favor, como pudiera hacer para llenar diferentes campos? porque lo probé y siempre me llena el mismo, gracias de antemano.
Jose Aguilar
Publicado el 08/04/2021 17:37Hola,
Buena pregunta a la que no tengo una respuesta. Es posible que no sea posible pero dejo la pregunta abierta por si alguien lo sabe.
Saludos
Cesar Parra
Publicado el 20/07/2021 22:53Excelente… jajaj nunca creí que fuera tan sencillo jajajajaja muchas gracias chicos una maravilla.
Xavier Vargas
Publicado el 16/02/2023 17:24Buen dia, probe su demo de reconocimiento de voz a texto y funciona muy bien, solo una question, hay veces que hay que estar dando permisos de acceso al microfono sin detener el reconocimiento, tengo que hacer algo en especifico para que esto no suceda ??. Y excelente me sera de mucha utilidad para adaptarlo a una biblioteca.
Paula
Publicado el 11/11/2023 21:35Rene P sólo debes repetir el código javascript y cambiar el nombre del search_input del html y javascript, yo en mi caso le puse números search_input1, al otro código search_input2, etc.