Comandos de voz en la web con JavaScript y Annyang - Demostración

Comandos de voz en la web con JavaScript y Annyang

Resumen: mostrar cómo controlar elementos en una página web usando la voz; es decir, implementar el reconocimiento de voz con JS para definir comandos de voz y ejecutar acciones (enviar un correo, mostrar un reporte, mostrar una gráfica, escribir texto) dependiendo de la acción.

Para el reconocimiento de acciones de voz en la web (o mejor dicho, en el navegador con JavaScript) vamos a usar la librería annyang que internamente utiliza la API de speech recognition.

Puedes ver lo que construiremos al final en este enlace.

La librería annyang

Como lo dije, vamos a usar esta librería pues funciona perfectamente y provee un modo de definir comandos en la web. Puedes ver más sobre la misma en su repositorio.

Debido a que utiliza la API de reconocimiento de voz, necesita acceder al micrófono. Y para acceder al micrófono se necesita estar en localhost o en un dominio con https.

Comandos de voz

El uso es simple. Cargamos el script de annyang, definimos una lista de comandos e invocamos a setCommands. Después, llamamos a start.

Veamos un ejemplo sencillo:

Como ves, los comandos son un diccionario en donde la clave es el comando, es decir, lo que el usuario dice. Y el valor es la función (usando la sintaxis de flecha en este caso); lo que se ejecuta cuando se detecta ese comando.

Al invocar a start se comienza a detectar la voz y en cada resultado se compara si algo que el usuario dijo coincide con un comando.

Dentro de la función puedes hacer casi cualquier cosa que harías en otro evento, pero la diferencia es que ahora es controlado por la voz.

Conseguir librería

Para descargar la librería puedes usar unpkg. Ve al siguiente URL:

https://unpkg.com/annyang

Eso te dará la última versión estable. En mi caso es:

https://unpkg.com/annyang@2.6.1/dist/annyang.min.js

Ahora hay que descargar el script e incluirlo en el head:

Soporte

Si quieres saber si el navegador soporta el reconocimiento de voz simplemente verifica si la variable global annyang está definida, o mejor dicho, no es null ni undefined.

Para ello puedes hacer algo como:

Recuerda incluir antes el script de la librería, pues si no lo incluyes, la variable estará igualmente no definida.

El idioma

Podemos definir el idioma que el usuario hablará, para que la detección sea mejor. Para ello invocamos a annyang.setLanguage así:

annyang.setLanguage("es-MX");

Los idiomas puedes verlos aquí.

Callbacks

annyang soporta varios callbacks que nos informan cuando algo sucede. Por ejemplo, cuando se deniegan permisos, se conceden, etcétera.

Hay un callback interesante y es el que captura todo lo que se ha reconocido en el micrófono. Es útil para saber lo que el motor reconoce o para depurar las cosas.

El callback es result, y lo definimos invocando a annyang.addCallback("nombre", función) por ejemplo:

Más comandos

Además de un simple comando estático, podemos capturar variables. Las mismas se definen con * al definir el comando. Veamos el siguiente ejemplo:

Así estamos capturando a *nombre y *anios, mismas variables que recibimos en la función. De este modo agregamos todavía más potencial a nuestras aplicaciones web.

Ejemplo y demostración

Comandos de voz en la web con JavaScript y Annyang - Demostración
Página web para demostrar reconocimiento de voz y comandos de voz en la web con JavaScript

Ahora que he mostrado lo básico podemos pasar a la demostración. Voy a usar los estilos de Bootstrap y definiré dos párrafos.

El primero tendrá mensajes indicando que un comando fue reconocido, y el segundo tendrá todo lo escuchado sin importar si coincide o no con un comando.

En el encabezado estoy cargando annyang, y en el pie estoy cargando el script que manejará todo.

Ahora veamos el script. En el mismo espero al evento DOMContentLoaded y compruebo que annyang funcione. Después defino algunos elementos del DOM obtenidos con querySelector para loguear las acciones e indico los comandos con la respectiva acción.

Adicional a ello también agrego un callback para cuando haya resultados, los cuales también logueo (como es un arreglo, el cual convierto a cadena usando join)

Vemos dos casos especiales en la línea 28 y 22.

En el primer caso tengo un comando para enviar un correo electrónico, pero al decir arroba, el motor lo reconoce como arroba y no como @ por lo que hago un remplazo de cadenas; del mismo modo elimino los espacios.

En el segundo caso hago una validación de que el mes del reporte de ventas sea un mes válido; ya que el mes será una variable y capturará cualquier palabra dicha.

Aunque parezca complicado, no lo es. Y con unas simples validaciones podemos armar un reconocedor potente.

Nota: annyang ya proporciona algunos modos de usar expresiones regulares, puedes ver la documentación para probarlo.

Notas finales

Recuerda que esta librería tiene las mismas restricciones que la API de reconocimiento de voz. No olvides que puedes probar la demo en este enlace, y ver el código completo aquí.

La documentación oficial está en GitHub. ¿Más sobre JavaScript moderno? click aquí.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario