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:
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
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í.