Text To Speech Ionic | Cómo dictar texto de manera digital

¿Necesitas que tu aplicación dicte un mensaje a tu usuario y has pernsado en Text To Speech Ionic? O, talvez ya sabes cómo se utiliza el componente Text to speech Ionic, pero te falta algún detalle para hacerlo funcionar cómo te gustaría ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás cómo pasar texto a voz desde tu aplicación de Ionic. Y que el mismo dispositivo le hable tu usuario.

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.

Instalación de Text To Speech

Pues cómo nos pasa con todos los módulos desacoplados del core del Ionic, tenemos que instalarlo en la app de manera manual. Para ello vamos a utilizar las siguientes líneas de código:

$ ionic cordova plugin add cordova-plugin-tts-advanced
$ npm install @awesome-cordova-plugins/text-to-speech-advanced

La primera instalará el plugin que permitirá la comunicación nativa con el sistema. Y el segundo es el que permitirá la comunicación de nuestro código TypeScript con el plugin.

Configuración de Text To Speect Ionic

Continuamos avanzando y ahora nos toca la parte en la que agregaremos el componente a los providers de nuestra clase.

Nota: En caso de que estemos usando el componente "ngx" no será necesario este paso.

El código para hacerlo es el siguiente:

...

import { TextToSpeechAdvanced } from "@awesome-cordova-plugins/text-to-speech-advanced/ngx";

...

providers: [
...,
TextToSpeechAdvanced,
...
]

...

Recuerda que no es recomendable agregar el módulo en el AppComponent a menos que lo vayamos a usar de manera global en la App. Así nos evitaremos de desperdiciar recursos. Basta con que lo agreguemos en el Module del componente que vaya a hacer uso de él.

Plataformas Soportadas

Ionic pone a nuestra disposición este módulo para las siguientes plataformas:

• Android
• iOS
• Windows Phone 8

La verdad que no entiendo porque no está disponible para Windows o el navegador, porque tiene sentido que estén para estos, pero bueno… No está.

Cómo se usar Text To Speech en Ionic

La verdad que no tiene demasiado misterio, pero vamos a comenzar con un breve ejemplo y comentamos después.

import { TextToSpeechAdvanced } from "@awesome-cordova-plugins/text-to-speech-advanced/ngx";

constructor(private tts: TextToSpeechAdvanced) { }

...

this.tts.speak('Hello World')

  .then(() => console.log('Success'))

  .catch((reason: any) => console.log(reason));

De manera resumida, realizamos los siguientes pasos:

1. Realizamos un import de la clase TextToSpeech.
   1. import { TextToSpeechAdvanced  } from '@awesome-cordova-plugins/text-to-speech-advanced/ngx';
2. Al tratarse de un servicio, inyectamos una instancia en el constructor de nuestra clase.
3. Y fijándonos en el código, llamamos a “speak” y le pasamos la cadena que hay que pasar a texto.
4. El sistema comenzará a dictar lo que le has pasado en la cadena.
5. Y cuando termine, la promesa se resolverá.

¿Has visto que sencillo? ¡Pues no tiene “nah” más!

Con esto ya estamos en disposición de continuar el tutorial. Vamos a ver sus métodos y campos de clase.

Funciones de TextToSpeech

La verdad que vamos a ver poquito. Esta clase solo tiene un método propio (recordad que solo cuento los propios. Los de los parientes no los cuento.)

speak(textOrOptions)

• Esta la función que nos permitirá pasar el texto a voz.
• Parámetros:
  • textOrOptions -> string | TSSOptions -> Será el texto que queramos dictar o una instancia de la interface que vamos a ver ahora más abajo.
• Retornará una promesa que se resolverá cuando se haya terminado de dictar.

Interfaces y clases adicionales

Y ya para terminar, comentamos la clase TSSOptions y ya tendrías toda la información necesaria para llevar a cabo tu cometido.

TTSOptions

Esta interface, que hemos visto en la función speak, contiene los siguientes campos:

• text- > string -> El texto a dictar.
• locale -> string -> Una cadena con el código ISO. Por ejemplo: 'en-US', 'zh-CN'
• rate -> string -> Será la velocidad con las que se dicte. El rango está entre 0 y 1. Siendo 0 el más lento, 0,5 la mitad y 1 el más rápido.

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.

Y ya hemos llegado al final geniete. Espero haberte ayudado y nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!