Saltar al contenido

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

Text to speech Ionic

¿Pensando en meter un sistema de lectura en tu aplicación para que dicha app transforme el texto a voz? 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?

Si has respondido que si a alguna de estas preguntas, tranquilo. No eres el primero, ni serás el último, que pasa por aquí a intentar darles respuestas.

Es más, hasta los que somos más expertos en estos temas, hacemos uso de este tipo de artículos cuando tenemos que implementar algo que no hemos utilizado nunca, o llevamos mucho sin usar.

Por si no me conoces, mi nombre es Aitor Sánchez, soy desarrollador de aplicaicones móviles desde 2014, y en este artículo te enseñaré cómo puedes pasar texto a voz desde tu aplicación de Ionic.

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

 

Más contenidos del curso


 

Y el tutorial en vídeo, cómo siempre. Para los más ganduletes…

 

 

Y listo, no tiene más. La clase es así de grande. Se terminó, se acabó, finalizó 🙂

Solo me queda despedirme de ti hasta el siguiente artículo y decirte que hasta entonces, que vaya bien.