Reconocimiento de voz con HTML5 y JavaScript

apiCon el desarrollo de nuevas tecnologías, se busca simplificar la interacción humano-computadora. Un ejemplo de esto es el desarrollo del API de voz para web (“Web Speech API”).

Inicialmente propuesto por Google, el API ya ha ganado popularidad e incluso se ha creado el “Speech API W3C Community Group”. Lamentablemente, aún no es estandarizado para todos los navegadores, así que, para utilizarlo, es necesario utilizar las versiones más recientes de Google Chrome.

Su implementación más sencilla es agregar la funcionalidad de reconocimiento de voz a un campo de texto (un “input” de tipo texto). Es necesario incluir el atributo “x-webkit-speech” al campo de texto. Como este atributo es un atributo que utiliza la sintaxis de prueba, sugiero además agregar el posible atributo para su estandarización “speech”.

<input type=”text” x-webkit-speech speech />

Esto agregará un micrófono al final del campo el cuál al hacérle clic, permitirá que el usuario dicte el valor del campo.

Pero ¿Qué ocurre si queremos utilizar la voz para otras actividades? También es posible obtener la transcripción de la voz del usuario a través de Javascript, y puede ser invocado a través de cualquier acción.

Para crear una variable de reconocimiento de voz se hace de la siguiente manera:

var recognition = new webkitSpeechRecognition();
//Se propone “new SpeechRecognition()” para un futuro

A este objeto le podemos asignar los siguientes eventos:

recognition.onstart = function() { … }
recognition.onresult = function(event) { … }
recognition.onerror = function(event) { … }
recognition.onend = function() { … }

Además también le podemos especificar el lenguaje que reconocerá:

recognition.lang = “es-MX”;

Para obtener los resultados es necesario tomar el valor de event.results[0][0].transcript en el evento de onresult. Para iniciar el reconocimiento de voz se utiliza la función start() del objeto de reconocimiento de voz.

Un ejemplo para insertar los resultados dentro de un elemento con id=”prueba” es hacer lo siguiente:

var recognition = new webkitSpeechRecognition();
recognition.lang = “es-MX”;
recognition.onstart = function() {};
recognition.onerror = function(event) {};
recognition.onend = function() {};
recognition.onresult = function(event) {
document.getElementById(‘prueba’).innerHTML=event.results[0][0].transcript;
};
recognition.start();

Dentro de los demás eventos tan solo habrá que agregar las acciones que se deseen.

La propuesta del API también incluye una especificación para convertir texto a voz, de esta forma la máquina le podría “hablar” al usuario. Lamentablemente, esta funcionalidad aún no es implementada en ningún explorador.

David Guzmán Araiza | Departamento de desarrollo web

/FacturaVital/