Tutorial: Como hacer un reproductor de música global a la aplicación – MediaElement Windows 8


Cuando estamos construyendo una aplicación para Windows 8, muchas veces se quiere amenizar la aplicación colocando sonidos de fondo o música, el problema viene es cuando comenzamos a indagar en la documentación de MSDN y vemos que los elementos de una página solo existen en solo esa página, por lo que si se hace un Navigate.From(…) es casi que imposible acceder al de otra página, todo esto es gracias al modelo de aplicación y más que todo por seguridad de las mismas aplicaciones.

Teniendo esto en cuenta vamos a crear nuestra aplicación llamada “Reproductor”:

Primer paso

Luego de haber creado la solución crearemos una carpeta llamada Model y en esa carpeta almacenaremos una clase llamada Cancion (Add>New Item>Class):

Segundo pasoLuego en la clase crearemos el constructor vacío y el importante que es con parametros, definimos los atributos y muy pero muy importante es dejar la clase pública:

Tercer pasoDespués de tener todo eso vamos al archivo App.xaml.cs que es donde estará nuestro reproductor de manera global, el código es el siguiente, en mi caso lo que va a sonar son villancicos navideños y los cargué como contenidos en la aplicación:


//Media Element interno para App.xaml.cs
private static MediaElement _globalAudioElement = new MediaElement();

//Hacemos una lista de canciones
private static List<Cancion> canciones= new List<Cancion>
 {
 new Cancion(0, "Vamos vamos pastorcitos", @"ms-appx:///Villancicos/Clasicos/01-Vamos-vamos-pastorcitos.mp3"),
 new Cancion(1, "A la nanita nana", @"ms-appx:///Villancicos/Clasicos/02-A-la-nanita-nana.mp3"),
 new Cancion(2, "Pastores venid", @"ms-appx:///Villancicos/Clasicos/03-Pastores-venid.mp3"),
 new Cancion(3, "Tutatina", @"ms-appx:///Villancicos/Clasicos/04-Tutaina.mp3"),
 new Cancion(4, "Los peces en el río", @"ms-appx:///Villancicos/Clasicos/05-Los-peces-en-el-río.mp3"),
 new Cancion(5, "Campana sobre campana", @"ms-appx:///Villancicos/Clasicos/06-Campana-sobre-campana.mp3"),
 new Cancion(6, "El burrito sabanero", @"ms-appx:///Villancicos/Clasicos/07-El burrito-sabanero.mp3"),
 new Cancion(7, "Vamos pastores vamos", @"ms-appx:///Villancicos/Clasicos/08-Vamos-pastores-vamos.mp3"),
 new Cancion(8, "Feliz navidad", @"ms-appx:///Villancicos/Clasicos/09-Feliz-navidad.mp3"),
 new Cancion(9, "Mamá donde están los juguetes", @"ms-appx:///Villancicos/Clasicos/10-Mamá-donde-están-lo-juguetes.mp3"),
 new Cancion(10, "Noche de paz", @"ms-appx:///Villancicos/Clasicos/11-Noche-de-paz.mp3")
 };

//Definimos si está reproduciendose la canción
public static bool GlobalAudioElementIsPlaying { get; set; }

//Hacemos el MediaElementPublico que tiene diferentes parametros
public static MediaElement GlobalAudioElement
{
 get
 {
 _globalAudioElement.AudioCategory = AudioCategory.BackgroundCapableMedia;
 _globalAudioElement.Volume = 1;
 _globalAudioElement.AutoPlay = true;

return _globalAudioElement;
 }
}

//Esto es para que no ocurra excepciones imprevistas
private void OnMediaLoaded(object sender, RoutedEventArgs e)
{
 if (_globalAudioElement == null)
 _globalAudioElement = sender as MediaElement;
}

// Obtenemos una canción de modo Random
public static string getCancionRandom()
{
 App.GlobalAudioElementIsPlaying = true;
 Random objeto = new Random();
 int numero = objeto.Next(11);
 return canciones[numero].url;
}

// Obtenemos una canción definida por el usuario
public static string getCancion(int numero)
{
 App.GlobalAudioElementIsPlaying = true;
 return canciones[numero].url;
}

En el explorador de soluciones se puede ver las canciones en su respectiva carpeta:

Quinto paso

Luego de esto abriremos el MainPage.xaml en Blend para trabajar más cómodamente:

Sexto pasoPara el siguiente paso yo uso un programa super bueno que desarrolla Syncfusion llamado Metro Studio donde puedo obtener todos los iconos para mi aplicación totalmente gratis:

Metro Studio 2Una vez abierto MainPage.xaml en Blend y tener instalada la aplicación (Metro Studio) vamos a comenzar a darle un poco de vida al proyecto agregando un Frame del tamaño de toda la página, un BottomAppBar y sus respectivos controles de manejo del reproductor como son, siguiente, anterior, play, pausa; usé el BottonAppBar debido a que las buenas prácticas de diseño de aplicaciones para Windows 8 en las barras de aplicación deben estar las funcionalidades secundarias y en la superior debe estar la navegación:

Octavo pasoLuego de haber creado cada botón tenemos que hacerle su funcionalidad por lo que se le hace a cada botón su propio Listener (para los programadores de Java), basta con darle doble click al evento para que Blend nos genere el código y guardamos todo para volver a Visual Studio:

CollageEl código que queda por hacer es la funcionalidad de cada botón, voy a dejarles el código completo de MainPage.xaml.cs pero con la diferencia que no copien el constructor, debido a que casi siempre trae problemas con this.InitializeComponent();

bool _isPause = false;
int _cont = 0;
int _cont2 = 0;

public MainPage()
{
	this.InitializeComponent();
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
}

#region Reproductor App Bar
private async void playCancion()
{
	var storageFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri(this.BaseUri, App.getCancionRandom()));
	IRandomAccessStream stream = await storageFile.OpenAsync(FileAccessMode.Read);
	App.GlobalAudioElement.SetSource(stream, "audio/mpeg");
	App.GlobalAudioElement.Play();
}

private async void Previous_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
	if (App.ContadorCancionesAtras2 > 1)
	{
		if (_cont2 == 0)
		{
			App.ContadorCancionesAtras2 = App.ContadorCancionesAtras - 1;
			_cont2 = 1;
		}
	}
	else
	{
		App.ContadorCancionesAtras2 = App.ContadorCancionesAtras;
	}
	var storageFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri(this.BaseUri, App.Atras[App.ContadorCancionesAtras2].url));
	IRandomAccessStream stream = await storageFile.OpenAsync(FileAccessMode.Read);
	App.GlobalAudioElement.SetSource(stream, "audio/mpeg");
	App.GlobalAudioElement.Play();
}

private void Play_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
	if (_cont == 0)
	{
		_isPause = false;
		App.GlobalAudioElementIsPlaying = false;
		playCancion();
		Pause.Visibility = Visibility.Visible;
		Play.Visibility = Visibility.Collapsed;
	}
	else
	{
		App.GlobalAudioElementIsPlaying = true;
		App.GlobalAudioElement.Play();
		Pause.Visibility = Visibility.Visible;
		Play.Visibility = Visibility.Collapsed;
	}
	_cont++;
}

private void Pause_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
	_isPause = true;
	App.GlobalAudioElement.Pause();
	Pause.Visibility = Visibility.Collapsed;
	Play.Visibility = Visibility.Visible;
}

private void Next_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
	_cont2 = 0;
	playCancion();
}

private void AppBar_Opened_1(object sender, object e)
{
	if (App.GlobalAudioElementIsPlaying)
	{
		Pause.Visibility = Visibility.Visible;
		Play.Visibility = Visibility.Collapsed;
	}
	else
	{
		Play.Visibility = Visibility.Visible;
		Pause.Visibility = Visibility.Collapsed;
	}
}
#endregion

Cabe aclarar que la lógica del botón de atras no está muy bien implementada, toca mejorarle muchos aspectos.

Lo único que falta por hacer es una carpeta llamada View y ahí hacer todas las páginas que necesitemos y navegar desde el _frame previamente hecho de la siguiente manera:

_frame.Navigate(typeof(Alguna_Pagina));

Espero les sea de utilidad🙂

 

Un comentario en “Tutorial: Como hacer un reproductor de música global a la aplicación – MediaElement Windows 8

Los comentarios están cerrados.