tema 8 xilófono convierte tu móvil en un instrumento musical · pdf...

Francisco García Muñoz 1

Tema 8 Xilófono

Convierte tu móvil en un instrumento musical

Parece mentira que el uso de la tecnología para registrar y reproducir sonidos se remonte al año 1878, cuando Edison patentó el fonógrafo. Hemos avanzado mucho en los últimos años y hoy disponemos de sintetizadores de música, CD, DVD y BlueRay, reproductores MP3 y MP4, móviles y tabletas que también funcionan como reproductores, etc.

En este tema estudiaremos la creación de una app que registra y reproduce la música generada por un xilófono.

Lo que construirá

Originalmente, la app fue creada por Liz Looney, miembro del equipo de desarrollo de App Inventor, y permite:

• Tocar ocho notas distintas al pulsar sobre sus respectivos botones de la pantalla. • Pulsar un botón para reproducir las notas que hemos tocado antes (y que la app habrá registrado). • Pulsar un botón para que la app olvide las notas que ha registrado anteriormente y el usuario pueda volver a empezar desde cero con una nueva canción.


Lo que aprenderás

A lo largo del tema se presentan los siguientes conceptos y componentes: • Necesitaremos usar un único componente de sonido (Sound) para reproducir múltiples archivos de audio.

• Usaremos un componente Clock para medir y hacer cumplir los tiempos de espera entre nota y nota.

• Estudiaremos cuándo resulta conveniente crear un procedimiento para hacer el trabajo más sencillo.

• Veremos cómo es posible que un procedimiento se llame a si mismo dando lugar a, lo que se conoce en terminología de programación, un procedimiento recursivo.

• Haremos un uso avanzado de variables de tipo lista y veremos cómo añadir elementos, eliminarlos, etc. Y todo ello en tiempo de ejecución.

Diseño de componentes

Conéctate a la web de App Inventor con tu navegador en http://ai2.appinventor.mit.edu. Abre un proyecto nuevo y asígnale el nombre Xilofono. Haz clic en Connect y configura tu dispositivo (o emulador) para poder hacer pruebas en vivo (ya hablamos de cómo hacerlo en el tema cero: Requisitos Previos). Una vez conectado, desde la ventana de diseño, en el panel de propiedades, cambia el título de la Screen1 por Xilófono.

Interfaz de nuestra app vista en el emulador


La interfaz de nuestra app es realmente sencilla, de todos modos, la imagen siguiente muestra cuáles son exactamente los componentes que hemos usado y sus respectivos nombres.

Componentes de la interfaz

La interfaz de nuestra app dispone de un teclado con ocho notas musicales para una escala mayor pentatónica (de siete notas), que va desde la C minúscula hasta la C mayúscula. Sigue los puntos siguientes para crearla: • Dibuja un primer botón en la pantalla. Deja el nombre como Button1 y cambia las siguientes propiedades:

o Cambia su color de fondo asignando el color magenta a la propiedad BackgroundColor.

o Asigna el texto C a su propiedad Text.

o Cambia su propiedad Width a Fillparent para que se extienda ocupando todo el ancho de la pantalla.

o Asigna el tamaño de 40 píxeles a su propiedad Height.

• Dibuja un segundo botón debajo del anterior y utiliza los mismos valores que antes para las propiedades Width y Height. Asigna el texto D a su propiedad Text y cambia su color de fondo (BackgroundColor) al color rojo.

• Repite el paso anterior para crear otros seis botones más. Fíjate que sólo será necesario modificar el color de fondo y el texto en cada uno de ellos. Los botones q faltan son:

• Botón número 3: Letra E y color de fondo rosa.

• Botón número 4: Letra F y color de fondo naranja.

• Botón número 5: Letra G y color de fondo amarillo.

• Botón número 6: Letra A y color de fondo verde.


• Botón número 7: Letra B y color de fondo cian.

• Botón número 8: Letra C y color de fondo azul.

En este caso, si lo prefieres, puedes cambiar la propiedad TextColor al color blanco para que se pueda leer mejor la letra.

• Añade un componente HorizontalArrangement debajo de los botones que simulan las teclas del xilófono.

• Añade un primer botón dentro del HorizontalArrangement y cambia su propiedad Text a la palabra Play. Renómbralo a BtPlay.

• Añade un segundo botón a la derecha del anterior y cambia su propiedad Text a la palabra Reset. Renómbralo a BtReset.

• Desde la categoría Media, arrastra un componente Sound a la pantalla. Como ya sabes, dicho componente aparecerá en la parte inferior de la ventana en el espacio reservado a los componentes no visibles. Cambia su propiedad MinimumInterval al valor de 500 milisegundos; ese será el tiempo mínimo que se debe esperar la app antes de reproducir el mismo sonido. No le daremos ningún valor en este momento a la propiedad Source puesto que lo haremos más tarde desde la ventana de edición de bloques.

• Por último, desde la categoría Sensors, añade un componente Clock a la pantalla. Igual que el anterior, este componente quedará en la sección de componentes no visibles. Si tienes tu dispositivo Android conectado y estás utilizando la prueba en vivo, podrás observar que los botones de colores aparecen sin espacios entre ellos. En cambio, en la vista de diseño de App Inventor sí que presentan un pequeño espacio en blanco de separación entre uno y otro. Esto no presenta ningún inconveniente para la app pero tenlo en cuenta. En la sección de descargas de este tema puedes encontrar los archivos de sonido que representan las notas musicales de cada tecla del xilófono: 1.wav, 2.wav, etc. Debes descargarlos a tu ordenador y después subirlos al servidor de App Inventor usando el botón Upload File. En esta ocasión, es muy importante que subas los archivos respetando su nombre original puesto que, más tarde, desde los bloques de código nos referiremos a ellos por ese nombre.

Conectar los botones a los sonidos

Necesitamos que nuestra app reproduzca un archivo de sonido cada vez que se pulsa una tecla (uno de los botones de colores). En concreto, si se pulsa el Button1 tendremos que reproducir el sonido 1.wav, si se toca el Button2, se reproducirá el sonido 2.wav, y así sucesivamente. Para conseguirlo, tendremos que cambiar al editor de bloques y definir los siguientes bloques de código:


Reproducir un sonido cuando se pulsa el botón 1 ó 2

Podríamos hacer lo mismo para todos los botones restantes, eso sí, cambiando únicamente el nombre del archivo que se debe reproducir en cada caso, pero el código sería tremendamente repetitivo. Un código repetitivo es una buena señal de que sería útil crear un procedimiento y eso es justamente lo que haremos. En concreto, crearemos un procedimiento que recibe un número como argumento, establece la propiedad Source del componente Sound1 al archivo de sonido adecuado en base al número y, finalmente, reproduce el sonido correspondiente. En resumen, optimizaremos el código de la app sin cambiar su comportamiento. Observa los bloques del procedimiento ReproducirNota:

Procedimiento para reproducir las distintas notas

Estos son los pasos que debemos seguir para crear el procedimiento anterior: 1. En la ventana de edición de bloques, desde la categoría Built-in, selecciona el bloque to procedure do y sitúalo en un espacio libre del área de trabajo.

2. Haz clic en el nombre del procedimiento y cámbialo por ReproducirNota.

3. Para definir el parámetro de entrada:

• Haz clic en el cuadro azul de configuración que hay en la esquina superior izquierda del procedimiento.

• Haz clic sobre el texto input y arrástralo desde el lado izquierdo al derecho de la ventana.

• Si quieres, haz clic sobre el nombre del parámetro (por defecto será x) y cámbialo por otro de tu gusto. Nosotros lo dejaremos así.

4. En el panel izquierdo, haz clic sobre el componente Sound1. Selecciona el método set Sound1.Source to y sitúalo dentro del procedimiento anterior.

5. En el panel izquierdo, selecciona el bloque join desde la categoría de Text y encájalo en la ranura libre del bloque anterior. Este bloque se encargará de construir el nombre del archivo de sonido que se debe reproducir y, para ello, se utilizará el número que recibe el procedimiento como parámetro (x) seguido del texto “.wav”.

6. Sitúa el ratón sobre el parámetro x que recibe el procedimiento. Cuando aparece el bloque get x haz clic sobre él y arrástralo hasta encajarlo en la primera ranura libre del join.


7. En el panel izquierdo, selecciona la categoría Text, haz clic sobre el primer bloque para crear un texto vacío y arrástralo hasta la segunda ranura disponible del bloque join. Dentro de él, escribe el texto “.wav” (incluyendo también el punto).

8. Por último, selecciona el componente Sound1 del panel izquierdo, busca el método Sound1.Play y sitúalo dentro del procedimiento tal y como se aprecia en la imagen anterior. Ahora tendremos que modificar los bloques Button1.Click y Button2.Click que ya habíamos creado anteriormente para que hagan uso del procedimiento que acabamos de diseñar.

Nueva versión para reproducir las notas de los botones1 y 2

Observa en la imagen anterior como, en esta nueva versión, sencillamente se hace una llamada al procedimiento ReproducirNota y se le proporciona, a modo de parámetro, el número del archivo de sonido que se debe reproducir: 1 ó 2 según corresponda. Siguiendo el mismo método que ya hemos usado para los eventos Button1.Click y Button2.Click, nos faltaría crear los bloques de código necesarios para los botones restantes: Button3.Click, Button4.Click, Button5.Click, Button6.Click, Button7.Click y Button8.Click.No olvides hacerlo antes de continuar.

Cargar previamente los sonidos

Si has probado la app en su estado actual, seguramente te habrá decepcionado porque no se habrá escuchado bien el sonido, o quizás, porque se haya producido un retraso desagradable entre sonido y sonido. Estos problemas se deben a que Android necesita cargar los archivos de sonido en tiempo de ejecución, y eso requiere un tiempo. Habrás advertido, sin embargo, que este problema no había surgido en ninguna app anterior y eso fue porque, en aquellas app’s, los archivos se cargaban automáticamente puesto que los asignábamos a la propiedad Source del componente Sound correspondiente. En resumen, en esta app vamos a tener que precargar manualmente los sonidos puesto que, tal y como está diseñada, la carga no se produce automáticamente. Aprovecharemos que disponemos del evento Initialize para conseguirlo. Observa los bloques siguientes:


Precarga manual de los archivos de sonido

Los bloques de la imagen anterior no reproducen ningún sonido en ningún momento. Sencillamente se asigna el archivo de sonido 1.wav a la propiedad Source del componente Sound1 lo que obliga a Android a cargar en memoria dicho sonido, después se hace lo mismo con todos los sonidos restantes. Este proceso tiene lugar cuando la app se abre por primera vez y, en consecuencia, todos los sonidos quedan preparados y precargados para su posterior uso.

Prueba tu app Reinicia la app antes de probarla para estar seguros de que se ejecuta el método Initialize. Las notas, ahora sí, se deben reproducir sin problemas y sin retrasos. Si no escuchas nada, asegúrate de que el volumen multimedia de tu dispositivo Android no está en silencio.

Registrar notas musicales

La reproducción de notas musicales con los botones de la app es bastante divertida, sin embargo, si además fuese capaz de grabar todas las notas y reproducirlas más tarde entonces sería más divertido todavía. Si queremos reproducir las notas que ha tocado el usuario, tendremos que registrar cuáles han sido, en qué orden y también, la cantidad de tiempo que transcurre entre una y otra nota, de lo contrario no seremos capaces de distinguir entre dos notas tocadas en una sucesión rápida y dos reproducidas con un silencio de 1 segundo entre ellas. Para conseguir nuestro objetivo, la app necesitará dos variables de tipo lista que llamaremos notas y tiempos:

• La lista notas guardará las notas (archivos de sonido) que se han tocado y el orden en el que se ha hecho.

• La lista tiempos servirá para guardar en qué instante del tiempo se ha tocado cada nota, y en consecuencia, nos permitirá conocer el lapso de tiempo que transcurre entre una nota y la siguiente.


Si recuerdas, cuando diseñamos la interfaz al principio del tema, incluimos un componente Clock; pues bien, gracias a él podremos ahora medir y registrar cuándo se toca cada nota del xilófono, y esa información la guardaremos en la lista de tiempos. Por tanto, antes de continuar, asegúrate que tu app dispone del componente Clock1. Además, desactiva la propiedad TimerEnabled de este componente (dejando la casilla correspondiente sin marcar) porque no queremos que su temporizador se apague hasta que no se lo indiquemos nosotros específicamente desde los bloques de código. Antes de continuar vamos a crear los bloques siguientes desde la ventana de edición de bloques:

Creamos dos variables de tipo lista: notas y tiempos

Añadimos información a las listas notas y tiempos cada vez

que se toca una nota En la primera de las dos imágenes anteriores hemos creado dos variables nuevas de tipo lista y las hemos inicializado a una lista vacía. En la segunda imagen, hemos tenido que ampliar los bloques del procedimiento ReproducirNota. Ahora, cada vez que el usuario toca una nota, tenemos que guardar el nombre del archivo que se ha reproducido (Sound1.Source) en la lista notas y el instante en el que lo ha hecho en la lista tiempos. Para registrar los tiempos, hacemos uso del método Clock1.Now que devuelve el valor actual del reloj del dispositivo, por ejemplo: 26 de enero de 2015, 11:24 A.M. con una precisión de milisegundos. Por ejemplo, si el usuario toca “Row, Row, Row Your Boat” [C CC D E], las listas tendrán cinco entradas que pueden ser: • Notas: 1.wav, 1.wav, 1.wav, 2.wav, 3.wav

Tiempos (omitimos la fecha): 12:00:01, 12:00:02, 12:00:03, 12:00:03.5, 12:00:04 Por otro lado, cuando el usuario toque el botón BtReset queremos que las dos listas (notas y tiempos) queden totalmente vacías. Dado que el usuario no verá ningún cambio en la pantalla después de pulsar este botón, haremos que el dispositivo vibre


durante un pequeño lapso de tiempo para informarle de que la app ha reseteado las listas. En la imagen siguiente puedes ver los bloques de código necesarios.

Vaciar las listas cuando el usuario toca el botón Reset

Reproducir notas musicales

Para simplificar el trabajo, vamos a proponer una primera versión del procedimiento que se encargará de reproducir las notas grabadas que no tiene en cuenta el intervalo de tiempo entre nota y nota. Después, complicaremos un poquito más los bloques para obtener la versión definitiva del procedimiento. Para empezar, necesitaremos: • Una nueva variable, que llamaremos contador y que usaremos para ir recorriendo la lista de notas y reproducir el archivo de sonido que corresponda para cada entrada de esa lista.

• Un nuevo procedimiento, que llamaremos ReproducirGrabacion que se encargará de reproducir una nota de la lista de notas y pasar a la siguiente.

• Un controlador de eventos que se ejecutará cuando el usuario toca el botón BtPlay y que se encargará de llamar al procedimiento ReproducirGrabacion.

Bloques necesarios para reproducir las notas grabadas


Vamos a pasar a analizar detenidamente los bloques de código que puedes observar en la imagen anterior. En primer lugar, declaramos una nueva variable. La llamamos contador y la inicializamos al valor cero. En segundo lugar, tenemos que definir las acciones que debe ejecutar la app cuando el usuario toca el botón BtPlay, y para hacerlo, utilizamos el controlador de evento BtPlay.Click. Dentro de este evento: • Primero comprobamos (if) si existen notas guardadas y, para saberlo, comparamos

si el número de elementos que hay guardados en la lista notas (length of list list get global notas) es mayor a cero.

• Si la comparación da verdadero (true, se ejecutará la parte then), es decir que sí hay notas en la lista, inicializamos la variable contador al valor 1 (set global contador to 1) y después llamamos al procedimiento ReproducirGrabacion.

• Si la comprobación da falso (false, se debería ejecutar la parte else), no sucede nada puesto que no se ha definido la parte else del bloque if-then-else.

Llegados a este punto, y para explicar con un ejemplo cómo funciona el procedimiento ReproducirGrabacion, imagina que tenemos una grabación de 3 notas, o lo que es lo mismo, la lista notas contiene 3 elementos, por ejemplo 1.wav, 3.wavy 6.wav: 1. La primera vez que se llama al procedimiento ReproducirGrabacion la variable contador es igual a 1.

a. Sound1.Source se establece al primer elemento de la lista notas, que es 1.wav.

b. Se llama a Sound1.Play y se reproduce el sonido.

c. Ya que contador (tiene el valor 1) es menor que la longitud de la lista notas (que es 3), la variable contador se incrementa en 1 (set global count to get global count + 1). Y, acto seguido, se vuelve a llamar al mismo procedimiento ReproducirGrabacion. Este hecho, que un procedimiento se llame a él mismo, se conoce el terminología de programación con el nombre de recursividad.

2. La 2ª vez que se llama a ReproducirGrabacion la variable contador es igual a 2.

a. Sound1.Source se establece al segundo elemento de la lista notas, que es 3.wav.

b. Se llama a Sound1.Play y se reproduce el sonido correspondiente al archivo 3.wav.

c. Puesto que contador (tiene el valor 2) es menor que la longitud de la lista notas (que es 3), la variable contador se incrementa en 1 (set global count to get global count + 1). Y, acto seguido, se vuelve a llamar al mismo procedimiento ReproducirGrabacion.


3. La 3ª vez que se llama a ReproducirGrabacion la variable contador es igual a 3.

a. Sound1.Source se establece al tercer elemento de la lista notas, que es 6.wav.

b. Se llama a Sound1.Play y se reproduce el sonido correspondiente al archivo 6.wav.

c. Puesto que contador (tiene el valor 3) que ya no es menor que la longitud de la lista notas (que es 3), ya no se vuelve a llamar al procedimiento ReproducirGrabacion y la recursividad termina. Y, consecuentemente, también termina la reproducción de las notas grabadas.

Nota

Aunque la recursividad es un método de programación muy eficaz, también puede ser muy peligrosa. Como experimento mental, trata de imaginar que hubiera pasado si no hubieramos incluido el bloque siguiente en el procedimiento ReproducirGrabacion:

Bloques que incrementan el valor de la variable contado en una unidad

Antes de probar la app, recuerda que habíamos empezado por crear una primera versión más sencilla del procedimiento ReproducirGrabacion sin considerar, a propósito, los retardos que pueden existir entre nota y nota para marcar el ritmo de la música. Así pues, vamos a completar el procedimiento para que puedas hacer las pruebas oportunas en tu dispositivo. Para conseguirlo, haremos uso del componente Clock1 que ya añadimos en su momento a la interfaz, por ejemplo, si después de reproducir una nota musical, la siguiente se reproduce 3.000 milisegundos (3 segundos) después, fijaremos la propiedad Clock1.TimeInterval a 3.000 y habilitaremos el reloj (Clock1), transcurrido ese tiempo se ejecutará el evento Clock1.Timer y desde allí volveremos a llamar al procedimiento ReproducirGrabacion para reproducir la nota siguiente. Siguiendo las indicaciones del texto anterior, la imagen siguiente muestra cuáles son los cambios que debemos introducir en el procedimiento ReproducirGrabacion:


Versión final del procedimiento ReproducirGrabacion

También tendremos que crear los bloques necesarios para el evento Clock1.Timer que tendrá lugar después de la reproducción de cada nota musical:

El evento Timer se ejecutará cuando transcurra el tiempo programado en TimeInterval Para tratar de explicarlo mejor usaremos un ejemplo. Imagina que las listas contienen la siguiente información:

• Lista notas: 1.wav, 3.wav y 6.wav.

� Lista tiempos: 12:00:00, 12:00:01 y 12:00:04. Los pasos que ejecutará la app son los siguientes:

1. La primera vez que se llama a ReproducirGrabacion la variable contador tiene el valor 1.

a. Sound1.Source se establece al primer elemento de la lista, que es 1.wav.

b. Se llama a Sound1.Play para reproducir el sonido anterior.

c. Dado que contador (que tiene el valor 1) es menor que la cantidad de notas (que es 3):

i. Clock1.TimeInterval se establece en la diferencia de tiempo entre la segunda nota y la primera, es decir, 12:00:01 menos 12:00:00 será 1 segundo.

ii. La variable contador se incrementa en una unidad, es decir, ahora ya tiene el valor 2.

iii. Se activa la cuenta atrás del reloj cambiando el valor de Clock1.enabled a true.

iv. Transcurrido 1 segundo, se ejecutará el evento Clock1.Timer que se encarga de desactivar el componente Clock (para que no siga contando de momento) y llamar nuevamente al procedimiento ReproducirGrabacion.


2. La segunda vez que se llama a ReproducirGrabacion, la variable contador tiene el valor 2.

a. Sound1.Source se establece al segundo elemento de la lista, que es 2.wav.


c. Dado que contador (que tiene el valor 2) es menor que la cantidad de notas (que es 3):

i. Clock1.TimeInterval se establece en la diferencia de tiempo entre la tercera nota y la segunda, es decir, 12:00:04 menos 12:00:03 será 3 segundos.

ii. La variable contador se incrementa en una unidad, es decir, ahora ya tiene el valor 3.

iii. Se activa la cuenta atrás del reloj cambiando el valor de Clock1.enabled a true.

d. Transcurridos 3 segundos, se ejecutará el evento Clock1.Timer y se desactivará el temporizador (Clock1) y se llamará otra vez a ReproducirGrabacion.

3. La tercera vez que se llama a ReproducirGrabacion, la variable contador tiene el valor 3.

a. Sound1.Source se establece al tercer elemento de la lista, que es 6.wav.


c. Dado que contador (que tiene el valor 3) ya no es menor que la cantidad de notas (que es 3) no pasa nada más, o lo que es lo mismo, la reproducción de la grabación ya ha terminado.


Variaciones

Puedes intentar mejorar la app de distintas formas, aquí te ofrecemos como ejercicio algunas opciones.

• Actualmente, la app no impide de ninguna forma que el usuario pueda pulsar el botón BtReset durante la reproducción, y eso provocará que la app se bloquee. Intenta averiguar por qué sucedería eso y, si quieres, intenta modificar BtPlay.Click para que se desactive el botón de Reset antes de empezar la reproducción. Además, cuando la reproducción finalice debes volver a activar el botón BtReset. En este último caso, en el procedimiento ReproducirGrabacion tendrás que transformar el bloque if-then en uno if-then-else y añadir los bloques necesarios para volver a activar el botón BtReset en la parte del else.

• Del mismo modo, el usuario puede tocar el botón BtPlaycuando una grabación se está reproduciendo. Puedes imaginar que pasaría, ¿no?. La app debe deshabilitar el botón BtPlayantes de que comience la reproducción de la grabación, cambiar el texto Play por Playing del mismo botón y, finalmente, volverlo a habilitar cuando la reproducción haya finalizado. Los pasos necesarios para conseguirlo son básicamente los mismos que ya hemos descrito en el punto anterior.

• Si el usuario toca una nota y se va a atender algo urgente; más tarde vuelve y toca otra nota, las notas formarán parte de la misma canción, algo que probablemente no es lo que tenía previsto. La idea es mejorar la app para que, transcurrido una cantidad de tiempo razonable (como un minuto o dos) entre una nota y la siguiente, se considere que la primera nota ya no es útil y que se ha empezado a tocar una nueva canción.

• Indicar visualmente qué nota se está reproduciendo en cada momento cambiando la apariencia del botón correspondiente, por ejemplo, cambiando el su propiedad BackgroundColor o ForegroundColor.

Resumen Algunos de los puntos más importantes que hemos desarrollado en este tema son:

• Podemos reproducir diferentes archivos de audio con un único componente Sound si cambiamos, desde la ventana de edición de bloques, su propiedad Source. Para evitar demoras en su reproducción es conveniente cargar todos los audios durante la carga de la app, es decir, usando el evento Screen1.Initialize.

• Podemos usar las variables de tipo lista para registrar las acciones del usuario en la app y, después, recuperar y procesar esos datos. En nuestro caso hemos utilizado esta técnica para grabar y reproducir más tarde una canción.

• Podemos utilizar el componente Clock para determinar la hora actual. Y restar dos valores de tiempo nos permite averiguar el tiempo transcurrido entre uno y otro con una precisión de milisegundos.

• La propiedad TimeInterval de un componente Clock se puede establecer desde la ventana de edición de bloques y no exclusivamente desde la ventana de diseño.

• Es posible hacer que un procedimiento se llame a él mismo creando así un procedimiento recursivo. Si utilizas está técnica de programación, asegúrate de que dentro del procedimiento existe un caso especial que hace que acabe y no se vuelva a llamar a sí mismo, de lo contrario la recursividad se repetirá infinitamente y la app se bloqueará.


Licencia

Xilófono de App Inventor 2, por Francisco García Muñoz basado en:

tema 8 xilófono convierte tu móvil en un instrumento musical · pdf...

Documents