xilofono_appinventor

APP INVENTOR: Xilófono Obxectivo Crearemos unha app que reproduza a música xerada por un xilófono. Esta app permite: • Tocar oito notas distintas ao pulsar sobre os seus respectivos botóns da pantalla.

Que aprenderemos Trataremos os seguintes conceptos e compoñentes: • Necesitaremos usar un único compoñente de son para reproducir múltiples arquivos de audio. • Estudaremos cando resulta conveniente crear un procedemento para facer o traballo máis sinxelo.

Deseño dos compoñentes Abre un proxecto novo e asígnalle o nome Xilófono. Fai clic no menú Conectar e configura o teu dispositivo (ou emulador) para poder facer probas en vivo. Unha vez conectado, desde a xanela de deseño, no panel de propiedades, cambia o Título da Screen1 por Xilófono, e engade en Icono a imaxe xilofono.png (Imaxe de Pixabay.com – CC0 Dominio Público)

Interface A interface da nosa app dispón dun teclado con oito notas musicais para unha escala maior pentatónica (de sete notas). Segue os puntos seguintes para creala: 1. Debuxa un primeiro Botón na pantalla. Deixa o nome como Button1 e cambia as seguintes propiedades: • • • •

Cambia na propiedade ColorDeFondo a súa cor asignando a cor violeta. Asigna á súa propiedade Texto o texto C. Cambia a súa propiedade Ancho a Ajustar al contenedor para que ocupe todo o ancho. Asigna á súa propiedade Alto o tamaño de 40 píxeles.

2. Repite o paso anterior para crear outros sete botóns máis. Fíxate que só será necesario modificar a cor de fondo e o texto en cada un deles. Os botóns q faltan son: • • • • • • •

Botón Botón Botón Botón Botón Botón Botón

número 2: número 3: número 4: número 5: número 6: número 7: número 8:

Letra D e cor de fondo vermella. Letra E e cor de fondo rosa. Letra F e cor de fondo laranxa. Letra G e cor de fondo amarelo. Letra A e cor de fondo verde. Letra B e cor de fondo turquesa. Letra C e cor de fondo azul.

Neste caso, se o prefires, podes cambiar a propiedade Color De Texto á cor branca para que se poida ler mellor a letra. 1

3. Desde a categoría Medios, arrastra un compoñente Sonido á pantalla. Como xa sabes, devandito compoñente aparecerá na parte inferior da xanela no espazo reservado aos compoñentes non visibles. Cambia a súa propiedade IntervaloMínimo ao valor de 500 milisegundos; ese será o tempo mínimo que debe esperar a app antes de reproducir o mesmo son. Non lle daremos ningún valor neste momento á propiedade Origen posto que o faremos máis tarde desde a xanela de edición de bloques. Se tes o teu dispositivo Android conectado e estás a utilizar a proba en vivo, poderás observar que os botóns de cores aparecen sen espazos entre eles. En cambio, na vista de deseño de App Inventor si que presentan un pequeno espazo en branco de separación entre un e outro. Isto non presenta ningún inconveniente para a app.

Ficheiros de son Aquí podes atopar os arquivos de son que representan as notas musicais de cada tecla do xilófono: 1.mp3, 2.mp3, 3.mp3, 4.mp3, 5.mp3, 6.mp3, 7.mp3, 8.mp3. Debes descargalos ao teu computador e despois subilos ao servidor de App Inventor usando o botón Subir Archivo…. Nesta ocasión, é moi importante que subas os arquivos respectando o seu nome orixinal posto que, máis tarde, dende os bloques de código referirémonos a eles por ese nome.

Programación Conectar os botóns aos sons Necesitamos que nosa app reproduza un ficheiro de son cada vez que se pulsa unha tecla (un dos botóns de cores). En concreto, se se pulsa o Botón1 teremos que reproducir o son 1.mp3, se se toca o Botón2, reproducirase o son 2.mp3, e así sucesivamente. 2

Imos ao editor de bloques e poderíamos definir os seguintes bloques de código:

Poderiamos facer o mesmo para todos os botóns restantes, cambiando unicamente o nome do arquivo que se debe reproducir en cada caso, pero o código sería tremendamente repetitivo.

Crear un procedemento: ReproducirNota Un código repetitivo é un bo sinal de que sería útil crear un procedemento e iso é o que faremos. En concreto, crearemos un procedemento que recibe un número como argumento, establece a propiedade Origen do compoñente Sonido1 ao arquivo de son adecuado en base ao número e, finalmente, reproduce o son correspondente. En resumo, optimizaremos o código da app sen cambiar o seu comportamento. Observa os bloques do procedemento ReproducirNota:

Estes son os pasos que debemos seguir para crear o procedemento anterior: 1. Na xanela de edición de bloques, dende a categoría Procedimientos, selecciona o bloque comoProcedimiento Ejecutar: 2. Fai clic no nome do procediemento e cámbiao por ReproducirNota. 3. Para definir o parámetro de entrada: • Fai clic no cadro azul de configuración que hai na esquina superior esquerda do procedemento. • Fai clic sobre o texto entrada e arrástrao desde o lado esquerdo ao dereito da xanela, o nome do parámetro por defecto será x. 4. No panel esquerdo, fai clic sobre o compoñente Sonido1. ponerSonido1.Origen como e sitúao dentro do procedemento anterior.

Selecciona o

método

5. No panel esquerdo, selecciona o bloque Unir dende a categoría de Texto e encáixao na rañura libre do bloque anterior. Este bloque encargarase de construír o nome do ficheiro de son que se debe reproducir e, para iso, utilizarase o número que recibe o procedemento como parámetro (x) seguido do texto “.mp3”. 6. Sitúa o rato sobre o parámetro x que recibe o procedemento. Cando aparece o bloque tomar x fai clic sobre el e arrástrao ata encaixalo na primeira rañura libre de Unir. 7. No panel esquerdo, selecciona a categoría Texto, fai clic sobre o primeiro bloque para crear un texto baleiro e arrástrao ata a segunda rañura dispoñible do bloque Unir. Dentro del, escribe o texto “.mp3“ (incluíndo tamén o punto). 8. Por último, selecciona o compoñente Sonido1 do panel esquerdo, busca o método llamar Sonido1.Reproducir e sitúao dentro do procedemento.

3

Nova versión para reproducir as notas Agora teremos que modificar o bloque cuandoBotón1.Clic que xa crearamos anteriormente para que fagan uso do procedemento que acabamos de deseñar.

Faise unha chamada ao procedemento ReproducirNota e proporciónaselle, a modo de parámetro, o número do arquivo de son que se debe reproducir. Faltaríanos crear os bloques de código necesarios para os botóns restantes: Botón2.Clic, Botón3.Clic, Botón4.Clic, Botón5.Clic, Botón6.Clic, Botón7.Clic, Botón8.Clic. Non esquezas facelo antes de continuar.

Cargar previamente os sons Se probaches a app no seu estado actual, seguramente che decepcionará porque non se escoita ben o son, ou quizais, porque se produce un atraso desagradable entre son e son. Estes problemas débense a que Android necesita cargar os arquivos de son en tempo de execución, e iso require un tempo. En resumo, nesta app imos ter que precargar manualmente os sons posto que, tal e como está deseñada, a carga non se produce automaticamente:

Asígnase o arquivo de son 1.mp3 á propiedade Origen do compoñente Sonido1 o que obriga a Android a cargar en memoria devandito son, despois faise o mesmo con todos os restantes. Este proceso ten lugar cando a app se abre por primeira vez e, en consecuencia, todos os sons quedan preparados e precargados para o seu posterior uso.

Proba a túa app Reinicia a app antes de probala para ter a seguridade de que se executa o método Inicializar. As notas, agora débense reproducir sen problemas e sen atrasos. Se non escoitas nada, asegúrate de que o volume multimedia do teu dispositivo Android non está en silencio.

4

Programación completa da App Xilófono

Reto: Para mellorar a app, podes indicar visualmente que nota se está a reproducir en cada momento cambiando a aparencia do botón correspondente, por exemplo, cambiando o a súa propiedade Color de Fondo.

Elaborado por Alicia Pérez tecnoloxía.org

5