Introducción - Un loro digital
Para
el siguiente programa vamos a utilizar los componentes de
reconocimiento de voz y sintetizador de voz de Android para hacer una
aplicación que transforme nuestro móvil en un loro digital que repita
nuestras palabras.
Primero el diseño de la pantalla
1 Crea un nuevo proyecto y llámalo, por ejemplo: "loro_digital"
2 Cuando tengas tu nuevo proyecto creado vete a las propiedades del componente Screen1 y cambia la propiedad AlignHorizontal a centrado.
3 Añade un componente imagen y sube una imagen llamada loro_digital.jpeg que encontrarás aquí
4 Cambia el ancho de la imagen a 200 y el alto a 320 si estás usando un tablet en vertical. Prueba con otros tamaños hasta que quede bien en tu dispositivo.
5 Añade también un componente label y otro componente botón debajo de la imagen. Para este ejemplo no es necesario que cambies los nombres de los componentes.
6 Cambia el texto del componente label y escribe "Te escucho....". Puedes también cambiar el tipo de letra para ponerlo en negrita, así se verá mejor.
7 Cambia también el ancho "width" por "fill parent" y la alineación del texto "TextAlignment" a center. Cambia el texto del botón y escribe "dime algo".
8 Ahora vamos a añadir el componente que nos permite activar el reconocimiento de voz de nuestro dispositivo Android. Lo encontrarás dentro de la categoría Media y se llama SpeechRecognizer.
Ahora vamos a añadir el sintetizador de voz. Con el sintetizador de voz conseguiremos que nuestro programa lea en voz alta los textos que nosotros queramos como ya hemos visto antes.
9 El componente necesario lo encontrarás dentro de la categoría Media y se llama TextToSpeech. Arrástralo a la ventana de tu programa y no olvides cambiar en sus propiedades el valor de país y de lenguaje. En el campo Country (país) introduce ESP y en el campo Language (lenguaje) escribe SPA.
Ya tenemos los componentes básicos. Ahora vamos al editor de bloques para hacer que todo funcione.
2 Cuando tengas tu nuevo proyecto creado vete a las propiedades del componente Screen1 y cambia la propiedad AlignHorizontal a centrado.
3 Añade un componente imagen y sube una imagen llamada loro_digital.jpeg que encontrarás aquí
4 Cambia el ancho de la imagen a 200 y el alto a 320 si estás usando un tablet en vertical. Prueba con otros tamaños hasta que quede bien en tu dispositivo.
5 Añade también un componente label y otro componente botón debajo de la imagen. Para este ejemplo no es necesario que cambies los nombres de los componentes.
6 Cambia el texto del componente label y escribe "Te escucho....". Puedes también cambiar el tipo de letra para ponerlo en negrita, así se verá mejor.
7 Cambia también el ancho "width" por "fill parent" y la alineación del texto "TextAlignment" a center. Cambia el texto del botón y escribe "dime algo".
8 Ahora vamos a añadir el componente que nos permite activar el reconocimiento de voz de nuestro dispositivo Android. Lo encontrarás dentro de la categoría Media y se llama SpeechRecognizer.
Ahora vamos a añadir el sintetizador de voz. Con el sintetizador de voz conseguiremos que nuestro programa lea en voz alta los textos que nosotros queramos como ya hemos visto antes.
9 El componente necesario lo encontrarás dentro de la categoría Media y se llama TextToSpeech. Arrástralo a la ventana de tu programa y no olvides cambiar en sus propiedades el valor de país y de lenguaje. En el campo Country (país) introduce ESP y en el campo Language (lenguaje) escribe SPA.
Ya tenemos los componentes básicos. Ahora vamos al editor de bloques para hacer que todo funcione.
El editor de bloques
Queremos
que nuestro loro nos escuche cuando pulsemos el botón. Por lo tanto,
usaremos el evento "Button1.Click" dentro de Screen1 tal y como hicimos
en el ejemplo anterior.
10 Arrástralo a tu área de trabajo.
Verás también que dentro de Screen1 aparecen los componentes "SpeechRecognizer1" y "TextToSpeech1" que son los que acabamos de añadir en el diseñador.
10 Arrástralo a tu área de trabajo.
Verás también que dentro de Screen1 aparecen los componentes "SpeechRecognizer1" y "TextToSpeech1" que son los que acabamos de añadir en el diseñador.
Speech Recognizer - ¡Tu móvil te escucha!
11 Vamos
a empezar por el reconocimiento de voz. Si seleccionas el componente
SpeechRecognizer1 verás que este componente tiene un bloque de color
morado llamado "call SpeechRecognizer1.GetText". Este es el bloque que
inicia el reconocimiento de la voz y que queremos que se active al
pulsar el botón. Así que cógelo y ponlo dentro del evento .Click de
nuestro botón.
12 Ahora selecciona el bloque "when SpeechRecognizer1.AfterGettingText" y ponlo en cualquier sitio de la pantalla. Este bloque marrón (evento) se activará tan pronto termine el reconocimiento de la voz.
13 Verás que al arrastrar este componente aparece pegado otro bloque llamado result. Este bloque lo ha creado automáticamente App Inventor para guardar el resultado del reconocimiento de voz en formato texto. Dicho de otro modo, el sintetizador del teléfono intentará reconocer nuestra voz y traducir a texto lo que digamos, guardando dentro de este bloque "result" el texto que ha entendido. Será por lo tanto este bloque el que vamos a usar para mostrar el texto en la pantalla.
14 Usa un bloque "set Label1.Text to" del componente Label1 y ponlo dentro del bloque .AfterGettingText.
15 Ahora, en el bloque marrón, coloca el ratón sin hacer click sobre “result”, arrastra el bloque “get result” que aparecerá y colócalo junto al bloque anterior “set Label1.Text”. De esta forma mostraremos el texto en pantalla.
16 Pruébalo en tu dispositivo.
12 Ahora selecciona el bloque "when SpeechRecognizer1.AfterGettingText" y ponlo en cualquier sitio de la pantalla. Este bloque marrón (evento) se activará tan pronto termine el reconocimiento de la voz.
13 Verás que al arrastrar este componente aparece pegado otro bloque llamado result. Este bloque lo ha creado automáticamente App Inventor para guardar el resultado del reconocimiento de voz en formato texto. Dicho de otro modo, el sintetizador del teléfono intentará reconocer nuestra voz y traducir a texto lo que digamos, guardando dentro de este bloque "result" el texto que ha entendido. Será por lo tanto este bloque el que vamos a usar para mostrar el texto en la pantalla.
14 Usa un bloque "set Label1.Text to" del componente Label1 y ponlo dentro del bloque .AfterGettingText.
15 Ahora, en el bloque marrón, coloca el ratón sin hacer click sobre “result”, arrastra el bloque “get result” que aparecerá y colócalo junto al bloque anterior “set Label1.Text”. De esta forma mostraremos el texto en pantalla.
16 Pruébalo en tu dispositivo.
Text To Speech - ¡Tu móvil te habla!
17 Ahora
vamos a añadir el componente de sintetizador de voz (TextToSpeech).
Selecciónalo dentro de Screen1 y verás sus propiedades y acciones. Verás
en color morado un bloque llamado "call TextToSpeech.Speak". Este
bloque es el que activa el sintetizador de voz, para lo cual tenemos que
pasarle el texto que queremos que hable. Arrastra este bloque y ponlo
dentro del bloque "when SpeechRecognizer1.AfterGettingText" al final.
18 Sólo nos queda pasarle a este bloque el texto que queremos que diga en voz alta. Como el texto ya lo tenemos en el bloque en el bloque result, sólo nos queda volver a seleccionarlo colocando el ratón sobre “result” en el bloque marrón. Coge el bloque “get result” que aparecerá y pégalo junto a TextToSpeech1.Speak, así:
¿Funciona? ¡Enhorabuena!
18 Sólo nos queda pasarle a este bloque el texto que queremos que diga en voz alta. Como el texto ya lo tenemos en el bloque en el bloque result, sólo nos queda volver a seleccionarlo colocando el ratón sobre “result” en el bloque marrón. Coge el bloque “get result” que aparecerá y pégalo junto a TextToSpeech1.Speak, así:
¿Funciona? ¡Enhorabuena!
Graba tu programa
No olvides guardar este programa para usarlo más adelante.
