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:
http://miwindowsphone.blogspot.com/
ReplyDeleteMicrosoft quiere aprovechar la actualización al kit de desarrollo para Windows Phone con más cursos y material de aprendizaje para desarrollar aplicaciones en esta plataforma móvil. Se agregan videos y documentos relacionados al desarrollo con Visual Studio 2010 RTM, con temas como: Introducción a Windows Phone 7 Series, Silverlight para Windows Phone y XNA Framework 4.0.
ReplyDeleteA mi me parece bien que mejore sus herramientas y saque kits de desarrollo.
ReplyDeleteA fin de cuentas, cuanto más ayude al desarrollador, más aplicaciones se desarrollarán sobre su plataforma.
Buenas, he intentado hacer una aplicación basada en esto añadiendo unos 50 sonidos (10 por pagina), y me sucede que al probarlo en el emulador funcionan perfectamente, mientras que en un terminal no se escuchan.
ReplyDeleteNo me da ningún error de compilación y ya he comprobado que están definidos igual los que funcionan y los que no, ¿Se te ocurre por qué puede ser?
Hola
ReplyDeleteEn principio debería funcionar y oirse sin problemas.
¿Qué formato tienen los archivos de sonido que estás usando? ¿Qué versión del sistema operativo Windows Phone tienes instalada?
Un saludo.
Buenas, ya lo he solucionado. El problema era el formato de los archivos (la mayoría en .mp3) que hacia que en el teléfono algunas sonaran y otras no.
ReplyDeleteAl pasarlas a .wav ningún problema(salvo que la aplicación ocupaba el doble)
Gracias por los tutoriales, sirven de mucha ayuda para comenzar.