Reproduciendo multimedia en Silverlight

Lo que vemos ahi arriba es una aplicacion Silverlight "Out of browser" o "Fuera del explorador" en su version traducida. Lo que hace esta app es mostrarnos una lista de archivos de una carpeta, en mi caso nos muestra la carpeta en donde almaceno ringtones, con el objetivo de hacer click en uno de ellos y reproducir el ringtone en cuestion.

Antes de ver el codigo empleado para reproducir contenido y mostrar un directorio, veamos la lista de los elementos que utilize dentro mi app:

-          Un listBox

-          Tres botones

-          Un Slider

-          Un mediaElement

-          Un textBlock

De seguro todos estan familiarizados con los botones, el textBlock y el listBox. Eso nos deja dos elementos “nuevos”: el Slider y el mediaElement

Slider:

                                             

O deslizador, es un control que nos permite seleccionar valores en un rango entre 0 y 10 desplazandonos ya sea con el mouse o nuestros dedos en dispositivos móviles.
Si quieres saber mas del slider ENTRA AQUI

mediaElement:

Representa un control que puede contener multimedia como audio y/o video.

Si quieres saber mas de mediaElement ENTRA AQUI

Entonces, utilizaremos los elementos de nuestra appa de la siguiente manera:

-          El mediaElement para “alojar” a nuestro archivo .mp3

-          El deslizador para controlar el volumen con el que es reproducido.

-          Los tres botones para reproducir, pausar y detener al archivo .mp3

-          El listBox para mostrar los archivos que residen dentro una carpeta

-          El textBlock simplemente para mostrar el titulo de la aplicación.

Aca muestro como dispuse cada elemento en mi aplicación, OJO que no podemos ver al MediaElement en cuestion, ya que decidi volverlo pequeño, dado que solo reproduciremos música y no necesitamos de un espacio para desplegar video, por ejemplo.

Ahora si vamos a lo interesante, el código, vayamos por pasos:

Recuperando los archivos de un directorio:

Para nuestro pequeño reproductor, quisiéramos al menos ver una lista de archivos dentro una carpeta, y eso es efectivamente lo que haremos, con ayuda de la clase DirectoryInfo

void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            string path = "D:/Music/Ringtones";

            DirectoryInfo info = new DirectoryInfo(path);

            foreach (var item in info.EnumerateFiles())

            {

                listBox1.Items.Add(item.FullName);

            }

        }

Queremos que una vez que cargue la pagina, cambien se cargue nuestro listbox con una lista de archivos, para esto como vemos en el pedazo de código de arriba, nos declaramos una cadena que contenga la dirección de la carpeta en cuestion que deseamos ver:

string path = "D:/Music/Ringtones";

Luego entra en juego la clase DirectoryInfo, que nos pide como dato una ruta, en nuestro caso, la cadena “path”, lo que hace esta clase en resumen es darnos una serie de métodos para crear, mover y enumerar y manipular directorios, dada una ruta, lo que hacemos una vez obtenemos información de la ruta en cuestion es adicionar el nombre de cada elemento que encontremos dentro de nuestro DirectoryInfo, esto con ayuda de un foreach.

Realizar una aplicación OutOfBrowser

No entraremos en un lujo de detalles al respecto, hablaremos mas de este tipo de aplicaciones en otro post, por ahora solo veremos los pasos a seguir para que nuestra aplicacion Silverlight pueda correr como una aplicación de escritorio y no necesariamente dentro de un navegador:

 Como vemos en las imagenes, para que nuestra aplicación pueda correr fuera del navegador, necesitamos ir a Propiedades, y en la parte de abajo encontraremos la opcion de “Habilitar la ejecucion de la aplicación fuera del navegador”, si hacemos check sobre esta opcion, se nos habilitara tambien el boton de  “Opciones fuera del navegador”, otra ventana aparecera en la cual, tambien en la parte de abajo tenemos la opcion de “Requerir confianza elevada cuando se este ejecutando afuera del navegador”.

Con esas opciones aceptadas, nuestra aplicación esta lista para ejecutarse fuera del navegador, en la siguiente compilacion dejara de ejecutarse en nuestro browser.

Reproducir multimedia en Silverlight

Finalmente, a lo que vinimos, hora de reproducir contenido en Silverlight, vamos a ver que es demasiado fácil gracias al control MediaElement, que nos provee de métodos para reproducir, pausar y detener la reproducción de multimedia, entre otras cosas mas:

void btnPlay_Click(object sender, RoutedEventArgs e)

        {

            string elementoEscogido = listBox1.SelectedItem.ToString();

            elementoEscogido = Reemplazar(elementoEscogido);

            mdElement.Source = new Uri(elementoEscogido);

            mdElement.Play();

        }

El código anterior nos muestra los pasos a seguir para reproducir multimedia. En realidad bastaria con el método Play(),si es que nuestro mediaElement solo tuviera una única fuente, pero dado que queremos reproducir un elemento seleccionado de nuestro listBox, anadimos tres líneas mas de código:

string elementoEscogido = listBox1.SelectedItem.ToString();

En esta línea, recuperamos en una cadena la ruta del archivo a ser reproducido, en este caso, el elemento que seleccionemos de nuestro listBox.

elementoEscogido = Reemplazar(elementoEscogido);

No se si esto es algo que solo me ha pasado a mi, pero cuando intentaba reproducir un elemento escogido de mi lista, no pasaba nada, me di cuenta que era porque la ruta que recuperaba de mi listBox era algo asi: “D:/Music/Ringtones/3 Libras.mp3”, cuando en realidad debería de ser asi: “D:\Music\Ringtones\3 Libras.mp3”

Intente utilizar el método Replace de los strings pero no tuve resultados asi que hice un método (no es el mas rápido ni mejor) que me permita cambiar los caracteres  “/” por “\”.

            mdElement.Source = new Uri(elementoEscogido);

Ya una vez obtenida la ruta en el formato correcto, lo que hacemos es establecer la propiedad de “Source” o “fuente” de nuestro mediaElement.

mdElement.Play();

Y luego lo único que queda por hacer es llamar al método Play(), que se encargara de reproducir nuestro mp3 seleccionado.

Cambiando el volumen

Nos queda por describir el cambio de volumen utilizando el deslizador:

void Deslizador_MouseMove(object sender, MouseEventArgs e)

        {

            mdElement.Volume = Double.Parse(Deslizador.Value.ToString())/10;

        }

Utilizamos para esto el evento MouseMove de nuestro Slider, dicho elemento se dispara cuando movemos el raton dentro del campo de nuestro Slider. Como podemos ver lo único que hacemos aca es obtener el valor del Slider y entregárselo a la propiedad de Volumen de nuestro mediaElement, dividimos este valor en 10 ya que el volumen acepta valores entre 0 y 1, y nuestro slider tiene el rango de 0 a 10.

Trate de no introducir muchas líneas de código en este post, ya que les dejo el CODIGO FUENTE de la aplicación aqui, sin embargo traten de hacerlo por ustedes mismos y recurran al código para hacer comparaciones al final.

De todas maneras, solo faltaría describir aca lo que hacemos con el botón de Pausa y Stop: Como TIP les digo que tenemos los métodos Pause() y Stop() y estos no necesitan de mas parámetros para ser utilizados.

Gracias por su tiempo y por pasar por mi blog, si tienen dudas, criticas o comentarios, no duden en contactarse conmigo que con gusto les ayudare en cuanto sea posible.