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?

Si has respondido que sí a alguna de las dos preguntas, que sería lo lógico, estate tranquilo. No eres el primero, ni serás el último, que entra en este artículo buscando respuestas para dichas preguntas.

Te digo más, hasta los que somo más expertos en este tema necesitamos estos artículos cuando vamos a implementar algún componente nuevo, o que llevamos mucho tiempo sin utilizar.

Por si no me conoces aún, mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo te enseñaré cómo implementar un sistema de dictado con el componente Speech Recognition Ionic en tu aplicación.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

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.

 

Más contenidos del curso

 

 

Y el tutorial en vídeo, cómo siempre

 

 

Pues nada más que comentar. Hemos llegado ya al final del artículo y solo queda despedirme hasta el siguiente artículo. Hasta entonces, que vaya bien 🙂