21.6.10

Aprender Windows Phone (parte 4): Reproducir audio en Windows Phone 7 usando Silverlight

Hoy vamos a aprender juntos a reproducir archivos de audio en Windows Phone 7.

Este artículo lo he creado a partir de una entrada en el blog de Don Burnett, MVP de Expression Blend. Tenéis el enlace a su blog al final de este artículo.

Muy bien, ¡vamos a divertirnos programando con Windows Phone 7!

Os voy a contar lo que queremos hacer. Nuestro programa tendrá un botón y cuando el usuario lo pulse, sonará un sonido (parecido a un “beep”).

Primero vamos a abrir Visual Studio 2010 Express for Windows Phone. Si no os lo habéis descargado, el otro día puse en mi blog una entrada sobre cómo hacerlo:



Una vez abierto, vamos a crear un nuevo proyecto:

- para ello hay que pulsar en el menú “File” -> opción “New Project” (ver figura 1),

Figura 1.

- en la nueva ventana (ver figura 2.) he seleccionado las opciones “Visual C#” -> “Silverlight for Windows Phone” -> “Windows Phone Application”. Los datos que he puesto son:

o Name = TestSound
o Location = (por ejemplo...) C:\warterrain\Ejemplo002\
o SolutionName = TestSoundSolucion


Figura 2.

Pues ya tendríamos el proyecto creado. En la parte superior aparecen dos títulos genéricos (“My application” y “page title”) de las aplicaciones Windows Phone 7. Vamos a cambiarlos para personalizar la aplicación.

En vez de “Page title”, ponemos “Test sound”. Para ello, pinchamos sobre las letras “page title” y en la ventana de Propiedades, seleccionamos Text y escribimos “Test Sound” (como podéis ver en la figura 3).


Figura 3.

Ahora vamos a cambiar el otro título “My application” y lo sustituiremos por “Example: Audio in Windows Phone 7”. Para ello pinchamos con el botón izquierdo del ratón sobre las letras “My application”. Luego en la ventana de Propiedades, escribimos en la propiedad Text el valor “Example: Audio in Windows Phone 7” (ver figura 4).


Figura 4.

Vamos a añadir el botón. Para ello, en Toolbox seleccionamos un control Button (figura 5) y lo pegamos en nuestro formulario.


Figura 5.

Cambiamos el texto a nuestro botón. Para ello, pinchamos en el botón y luego en la ventana de Propiedades, ponemos en Content el valor “Beep ¡” (ver figura 6).


Figura 6.

¿Cómo váis hasta ahora? Os muy sencillo y divertido, ¿verdad?.

Os recuerdo que si tenéis alguna duda, podéis preguntarme y yo os respondo encantado.

Sigamos. Vamos a agregar el archivo de sonido a la solución. Yo he pillado un archivo de sonido llamado “newalert.wma” y suena como un “beep” de un paquete de sonidos que hay en internet. Pero podéis coger cualquier otro archivo de sonido similar.

Os recuerdo que al final de este artículo os pondré la dirección de donde os podéis descargar el código y recursos de este ejemplo al completo.

Pues para añadir este archivo de sonido, vamos a pinchar con el botón derecho del ratón en el nombre del proyecto “TestSound” en la ventana de Explorador de soluciones. Aparecerá un menú donde seleccionaremos “Add” y después “Existing Items...” (ver figura 7) para indicar que vamos a añadir al archivo al proyecto que está dentro de una de las carpetas de nuestro disco duro.


Figura 7.

Después seleccionaremos el fichero y se creará una copia en la carpeta raíz de nuestra proyecto (ver figura 8).


Figura 8.

Debemos poner los siguientes valores en las propiedades (seleccionar el archivo –> ventana de Propiedades) del archivo de sonido (ver figura 9):

Build Action = Content
Copy to output directory = Copy always


Figura 9.

En el artículo de Don Burnett se indica que en la version CTP no está implementado la opción Resources de Build Action. Por esto se debe de añadir como contenido.

Ahora vamos añadir el control MediaElement que será el que se encargará de reproducir el archivo de audio.

En Toolbox, seleccionaremos el control MediaElement (ver figura 10) y lo arratraremos hasta el formulario.


Figura 10.

Después hay que ir a la ventana de Propiedades para poner en Source el nombre del archivo “newalert.wma”. Con esto el MediaElement buscará en la carpeta raíz el archivo newalert.wma y sabrá que este es el archivo multimedia a reproducir (ver figura 11).


Figura 11.

También hay que cambiar la propiedad Autoplay del MediaElement y ponerla a Falso (desmarcar la casilla) para que no se ejecute automáticamente sin solicitarlo al arrancar la aplicación.

Ya queda poquito. ¡Ánimo!

Pues solo nos falta indicar que cuando se pulse el botón se reproduzca el sonido. ¿Cómo hacemos esto? Vais a ver qué sencillo.

Primero seleccionamos el botón pinchando con el botón sobre él. Vamos a la ventana de Propiedades para ver las Propiedades del botón. Si pulsamos en la pestaña Events, se nos mostrarán los eventos del botón. Si hacemos doble click en la casilla de Click (ver figura 12) se creará automáticamente el procedimiento para tratar un click en el botón.


Figura 12.

Pues en el código del programa vamos a poner dos instrucciones (el objeto MediaElement tiene el nombre mediaElement1):

private void button1_Click(object sender, RoutedEventArgs e)
{

mediaElement1.Stop();
mediaElement1.Play();

}

Con la primera instrucción se pone el reproductor en el comienzo del archivo a reproducir y la segunda instrucción reproduce el contenido del archivo de audio.

Pues ya está. Tenemos listo nuestro primer programa que reproduce un archivo de audio. Ahora vamos a verlo funcionar.

Primero vamos a compilar el programa, para ello seleccionamos en el menú “Debug” -> “Build Solution”.

Si todo ha ido bien. Os habrá dicho que no hay ningún error. ¡Genial! ¡Qué buenos somos!

Pues vamos a ver ejecutar el programa. Para ello, pulsamos en el menú “Debug” -> “Start debugging”.

Se abrirá el emulador del Windows Phone 7 y podréis tomaros un descanso mientras se carga el programa en el emulador.

Vamos a esperar unos momentos... ya está cargado. En la pantalla el emulador tendrá el siguiente aspecto:


Figura 13.

Si pulsáis en el botón oiréis el sonido reproduciéndose.

¡Buen trabajo, chic@s!

Pues esto es todo por hoy. Espero que os lo hayáis pasado tan bien como yo. Cualquier duda no dudéis en preguntar.



Enlaces:

Blog de Don Burnett:

Artículo de Don Burnett “Usando el control MediaElement en Windows Phone 7”: http://www.uxmagic.com/blog/post/2010/03/20/Using-the-Media-Element-Control-with-Windows-Phone-Series-7.aspx

Código y archivos de este ejemplo:

Sitio web para desarrolladores de Windows Phone 7:

Sitio web MobileNUG Series:

Grupo de estudiantes DotNetClub UCM:


20.6.10

Aldebaran Robotics Nao Robot Show

Impresionante. Me ha dejado sin palabras.

Sobre todo levantarse del suelo y tumbarse que es algo muy difícil de hacer con robots de dos patas.

16.6.10

Evento MAD.NUG: ¿Qué es Windows server AppFabric?

Os paso todos los detalles de este evento que he encontrado en esta noticia en el blog de Gisela Torres:

Es posible que muchos de vosotros hayais oído hablar de AppFabric como parte de Windows Azure. El 24 de Junio, vamos a ver con la ayuda de Roberto Gonzalez, MVP de Biztalk, qué es Windows Server AppFabric fuera de la nube, qué relación tiene con Biztalk y cuándo usar uno u otro.
El evento tendrá lugar en el edificio de Microsoft Ibérica en Pozuelo de Alarcón, Madrid.

Para acceder al registro podéis hacerlo a través del siguiente enlace.

Por otro lado, si necesitáis más información acerca de esta tecnología podéis acceder al centro de desarrollo de Windows Server.

¡Os esperamos!