Speech Recognition Ionic | Habla con tu móvil con lenguaje natural

¿Pensando en incluir un sistema de dictado en tu aplicación? O, quizás ya sabes cómo utilizar el componente Speech Recognition Ionic en tu app, pero te falta algún detalle para hacerlo funcionar cómo tú quieres ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender a implementar un sistema de dictado con el componente Speech Recognition Ionic en tu aplicación.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y ahora si, comenzamos. Let´s go!

Instalación de Speech Recognition en Ionic

Cómo cualquier componente desacoplado del core del sistema, necesita una instalación. Para ello vamos a usar las dos siguientes líneas de consola:

$ ionic cordova plugin add cordova-plugin-speechrecognition
$ npm install @awesome-cordova-plugins/speech-recognition

La primera línea de código instalará el plugin que permitirá la comunicación con la parte nativa del sistema. Y la segunda, permitirá la comunicación entre nuestro código y el plugin.

Configuración de Speech Recognition para Ionic

SI estás en una versión de Ionic 4 o superior, y estás usando el módulo NGX, no es necesario que realices esta parte. De lo contrario necesitamos incluir este servicio en los providers de nuestro módulo. Lo podemos hacer así:

...

import { SpeechRecognition } from "@awesome-cordova-plugins/speech-recognition/ngx"

...

providers: [
...,
SpeechRecognition,
...
]

...

Plataformas soportadas

En este caso me pasa lo mismo que en el de Text To Speech. Y es, que me parece rarísimo que no haya soporte para plataforma PC. Pero bueno, estas son las disponibles:

• Android
• iOS

Cómo se usa Speech Recognition en Ionic con ejemplo / example

Bueno, llegados a este punto siempre me gusta incluir un ejemplo antes para que así nos sea más didáctico el aprendizaje. Vamos a ello…

import { SpeechRecognition } from '@awesome-cordova-plugins/speech-recognition/ngx';


constructor(private speechRecognition: SpeechRecognition) { }

...

// Check feature available
this.speechRecognition.isRecognitionAvailable()
  .then((available: boolean) => console.log(available))


// Start the recognition process
this.speechRecognition.startListening(options)
  .subscribe(
    (matches: Array<string>) => console.log(matches),
    (onerror) => console.log('error:', onerror))


// Stop the recognition process (iOS only)
this.speechRecognition.stopListening()


// Get the list of supported languages
this.speechRecognition.getSupportedLanguages()
  .then(
    (languages: Array<string>) => console.log(languages),
    (error) => console.log(error))


// Check permission
this.speechRecognition.hasPermission()
  .then((hasPermission: boolean) => console.log(hasPermission))


// Request permissions
this.speechRecognition.requestPermission()
  .then(
    () => console.log('Granted'),
    () => console.log('Denied'))

1. En primer lugar, realizamos un Import de SpeechRecognition para poder utilizar el módulo dentro de nuestra clase.
2. Al tratarse de un servicio, inyectamos una instancia de este en el constructor. Ya llega inicializada.
3. Ahora vamos a ir comentando las funciones una por una.
   1. “isRecognitionAvailable”: Nos permite conocer si esta característica está disponible en el dispositivo.
   2. “startListening”: Nos permite poner el dispositivo a escuchar el sonido.
   3. “stopListening”: Solo para iOS y nos permite para la escucha del dispositivo.
   4. “getSupportedLanguages”: Accedemos a los idiomas que tenemos disponibles.
   5. “hasPermission”: Comprueba si tenemos permisos para poder utilizar el Speech Recognition.
   6. “requestPermission”: Y en caso de que no tengamos los permisos para utilizarlo, con esta función los solicitamos en tiempo de ejecución.

Y una vez visto el ejemplo, ya estamos en disposición de explicar el resto. Aunque también te digo, que ya hemos visto casi toda la clase :)

Funciones y métodos de Speech Recognition en Ionic

Ahora les toca el turno a las funciones. La verdad que nos son muchas así que no me extenderé mucho.

isRecognitionAvailable()

• Comprueba si está disponible esta característica en el dispositivo.
• Retorna una promesa que tendremos que controlar. En ella llega un booleano que nos informará de si está o no.

startListening()

• Esta función es la que pone el dispositivo en modo escucha y la que nos retornará las palabras, o frases, escuchadas en lenguaje natural.
• Retorna una promesa que tendremos que controlar. En ella llega un Array de strings con todas las coincidencias.

stopListening()

• Esta función corta la escucha. Y en iOS es la función que fuerza a “startListening” a resolverse. En Android “startListening” se resuelve solo.

getSupportedLanguages()

• Con esta función podemos obtener en una colección todos los lenguajes que soporta el componente en el dispositivo e idioma en concreto.
• Retorna una promesa que tendremos que controlar. En ella llega un array de cadenas con todos los idiomas disponibles formateado en código ISO.

hasPermission()

• Comprueba si el componente tiene permisos para utilizar esta funcionalidad de Speech Recognition.
• Retorna una promesa que tenemos que controlar. En ella llega un booleano que nos indica si está disponible o no.

requestPermission()

• Esta función realiza una solicitud de permisos para poder usar el sistema. Va de la mano con la función anterior.
• Retorna una promesa que tendremos que controlar. En caso de que estén aceptados los permisos, o el usuario los acepte en ese momento, se resolverá. En caso contrario saldrá por el catch.

Un tutorial en video por si no te gusta leer

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.