DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
¡Actualizado el 10-10-2017!

JavaScript cuenta con toda clases de APIs que facilitan el proceso al momento del desarrollo de aplicaciones web de cualquier tipo:

Por nombrar algunas de las muchas APIs de JavaScript de las cuales se han visto algunas en DesarrolloLibre.

"La API en JavaScript que nos invita a hablar con las aplicaciones"

En esta entrada daremos los primeros pasos con la API de Reconocimiento de Voz speechRecognition() en JavaScript que en otras palabras da la capacidad a nuestras aplicaciones de reconocer la voz según el idioma configurado a través del micrófono de la PC o dispositivo móvil.

Comenzando con la API de Reconocimiento de Voz en JavaScript

El esqueleto del código que emplearemos es el siguiente y lo analizaremos en la siguiente sección:

if (!('webkitSpeechRecognition' in window)) {
  alert("¡API no soportada!");
} else {
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;
  recognition.lang = "es-Ve";

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

Analizando el código anterior...

Al igual que pasa con todas las APIs "nuevas", es necesario verificar la disponibilidad de la API de Reconocimiento de Voz en el navegador consultando si el objeto webkitSpeechRecognition existe; si no existe, simplemente se muestra un mensaje diciendo que la API no se encuentra disponible en su navegador:

if (!('webkitSpeechRecognition' in window)) {
  alert("¡API no soportada!");
}else{
...
}

Si la API de Reconocimiento de Voz se encuentra disponible o está implementada en el navegador, se ejecuta la siguiente sección de código encerrada por el else; la primera línea de código:

  recognition.continuous = true;

Inicializa el atributo continuous (establecido en false por defecto) con el objetivo de definir la continuidad al momento de hablar; es decir, se establece que cuando el usuario deje de hablar, el Reconocimiento de Voz llega a su fin (se dispara el evento onend).

Esta otra línea de código:

recognition.interimResults = true;

Especifica si los resultados devueltos son definitivos y no cambiarán (false) o no (true).

La siguiente línea de código:

recognition.lang = "es-VE";

Inicializa el atributo lang que especifica el lenguaje que va ha ser reconocido a realizar la petición; en otras palabras, el lenguaje a emplear por el usuario.

Eventos principales de la API de Reconocimiento de Voz en JavaScript

Una vez establecidos los atributos anteriores, ahora es el turno de los eventos que son los que realmente permitirán controlar y obtener las palabras del usuario en texto plano:

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

El evento onstart de la API SpeechRecognition

Este evento se ejecuta cuando la función start() es invocada el navegador empieza a "escuchar"; en otras palabras, representa el momento en el cual la aplicación comienza a escuchar; para invocar al evento onstart debemos hacer lo siguiente:

var recognition = new webkitSpeechRecognition();
...
recognition.start();

El evento onerror de la API SpeechRecognition

Este evento se ejecuta si y sólo si ha ocurrido algún error.

El evento onend de la API SpeechRecognition

Este evento se ejecuta cuando el usuario ha acabado de hablar, lo que significa que el reconocimiento de voz a llegado a su fin.

El evento onresult de la API SpeechRecognition

Finalmente, este evento devuelve el resultado obtenido; dicho de otra forma, las palabras expresadas de forma verbal convertido en texto plano.

Esta es la parte interesante de la API; aquí conseguimos finalmente la respuesta obtenida por el usuario en la siguiente estructura:

{
  ..
  results: {
    0: {
      0: {
        confidence: 0.6...,
        transcript: "Hola"
      },
      isFinal:true,
      length:1
    },
    length:1
  },
  ..
}

Para obtener el último párrafo pronunciado por el usuario podemos hacer lo siguiente:

if(event.results[i].isFinal)
    event.results[i][0].transcript;

Ejemplo completo de la API de Reconocimiento de Voz en JavaScript

Ya explicado la parte "fuerte" del código o lo que es lo mismo lo básico de la API es posible crear un pequeño programa que permite emplear el Reconocimiento de Voz en una aplicación web y mostrar el resultado en un campo de texto:

	var recognition;
	var recognizing = false;
	if (!('webkitSpeechRecognition' in window)) {
		alert("¡API no soportada!");
	} else {

		recognition = new webkitSpeechRecognition();
		recognition.lang = "es-VE";
		recognition.continuous = true;
		recognition.interimResults = true;

		recognition.onstart = function() {
			recognizing = true;
			console.log("empezando a escuchar");
		}
		recognition.onresult = function(event) {

		 for (var i = event.resultIndex; i < event.results.length; i++) {
			if(event.results[i].isFinal)
				document.getElementById("texto").value += event.results[i][0].transcript;
		    }
			
			//texto
		}
		recognition.onerror = function(event) {
		}
		recognition.onend = function() {
			recognizing = false;
			document.getElementById("procesar").innerHTML = "Escuchar";
			console.log("terminó de escuchar, llegó a su fin");

		}

	}

	function procesar() {

		if (recognizing == false) {
			recognition.start();
			recognizing = true;
			document.getElementById("procesar").innerHTML = "Detener";
		} else {
			recognition.stop();
			recognizing = false;
			document.getElementById("procesar").innerHTML = "Escuchar";
		}
	}

Dando algunas consideraciones sobre el código anterior:

Problemas con Google Chrome

En las últimas versiones de Google Chrome lanzadas por Google ha realizado cambios en la seguridad de su navegador que imposibilitan emplear dispositivos como micrófonos y cámaras desde el popular navegador si la web no cuenta con el certificado HTTPS la solicitud de acceder ya sea a la cámara o micrófono del dispositivo no funcionará, esto trae muchos problemas si no tenemos dicho certificado HTTPS en nuestra web o la web en donde queramos emplear el script para acceder a la cámara web o micrófono del dispositivo.

Manejo de los permisos en Google Chrome

Google Chrome tiene un sistema de permisos de los dispositivos que pueden ser accedidos a las distintas web; para ello nos ubicamos en el script desarrollado en esta entrada (o cualquier otro que intente acceder al micrófono de nuestro equipo) y vamos al pequeño icono que se nos presenta en la barra de navegación ubicado en la esquina superior derecha y damos un clic sobre el mismo; el problema que existe con las versiones recientes de Google Chrome es que sin importar la opción que seleccionemos:

solicitud permiso micrófono
Google Chrome nunca nos permite acceder al micrófono a ninguna web que no tenga el certificado HTTPS salvo que sea localhost.

y damos clic sobre "Administrar configuración de micrófono":

ventana solicitud permiso micrófono

Aquí podemos ver las web las cuales tienen permitidas acceder a nuestro micrófono; como un punto importante vemos que Google Chrome permite acceder al micrófono si estamos accediendo desde el localhost, asi que si copiamos el script provisto en esta entrada y lo copiamos en nuestro localhost el mismo podrá funcionan correctamente en el momento en que Google Chrome solicite el permiso y posteriormente le asignemos el mismo. Un punto importante es que NO veremos ninguna web en esta sección que no tenga el certificado HTTPS no importa que opción coloquemos en la ventana anterior.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Multiple.js para fundir nuestros fondos en HTML

Multiple.js para fundir nuestros fondos en HTML

Hover over the cards

Hover over the cards

Calendario de cubo

Calendario de cubo

Algunos artículos que te pueden interesar

Cómo integrar PayPal en Android

Cómo integrar PayPal en Android

En esta entrada se explica cómo integrar la SDK oficial de PayPal en Android, realizar un pago y notificar al usuario empleando cuentas Sandbox.

Andrés Cruz 05-09-2016

Primeros pasos con las Cookies en JavaScript

Primeros pasos con las Cookies en JavaScript

JavaScript cuenta con varias tecnologías persistentes (que la información que deseemos almacenar se mantenga aun cuando el usuario cierre o refresque la ventana de su navegador) como SQLite y las Cookies que trataremos en esta entrada.

Andrés Cruz 17-12-2015

Eventos de Luz Ambiental con JavaScript

Eventos de Luz Ambiental con JavaScript

Podemos detectar el nivel de luz ambiental obtenida por el sensor de luz del dispositivo con JavaScript; de esta forma es posible configurar las aplicaciones según el nivel de luz presente en el ambiente.

Andrés Cruz 15-02-2016