23 - Control MediaElement para la reproducción de archivos de audio


Una de las funcionalidades que encapsula la clase MediaElement es la de reproducción de archivos de sonido (mp3, wav etc.)

En la propiedad Source debemos hacer referencia a la ubicación del archivo (puede ser un recurso propio de la aplicación normalmente localizada en la carpeta Assets, en internet etc.)

Para iniciar la reproducción del archivo de sonido debemos llamar al método Play.

Otros métodos y propiedades útiles de la clase MediaElement:

Problema.

Probar los métodos de la clase MediaElement.

Como primer paso creamos un nuevo proyecto llamado "Proyecto31" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto

Copiar un archivo llamado numeros.mp3 a la carpeta Assets:

MediaElement

La interfaz visual a implementar es la siguiente:

MediaElement

El archivo MainPage.xaml:

<Page
    x:Class="Proyecto31.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Proyecto31"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel>
        <Button x:Name="boton1"
                Content="Iniciar ejecución de archivo de audio" 
                Click="boton1_Click"
                HorizontalAlignment="Center"
                Margin="10"/>
        <Button x:Name="boton2"
                Content="Pausar" 
                Click="boton2_Click"
                HorizontalAlignment="Center"
                Margin="10"/>
        <Button x:Name="boton3"
                Content="Finalizar" 
                Click="boton3_Click"
                HorizontalAlignment="Center"
                Margin="10"/>
        <StackPanel Orientation="Horizontal" 
                    HorizontalAlignment="Center">
            <Button x:Name="boton4"
                    Content="Volumen -" 
                    HorizontalAlignment="Center"
                    Click="boton4_Click"
                Margin="10"/>
            <Button x:Name="boton5"
                    Content="Volumen +" 
                    HorizontalAlignment="Center"
                    Click="boton5_Click"
                    Margin="10"/>
        </StackPanel>
        <Button x:Name="boton6"
                Content="Reproducir en forma circular"
                HorizontalAlignment="Center"
                Click="boton6_Click"
                Margin="10" />
        <MediaElement x:Name="mediaElement1" 
                      Visibility="Collapsed"                       
                      AutoPlay="False"  />
    </StackPanel>

</Page>

Además de todos los botones con sus respectivos eventos debemos definir un objeto de tipo MediaElement e iniciamos su propiedad Visibility con el valor "Collapsed" (con esto el control no se ve en la interfaz visual):

        <MediaElement x:Name="mediaElement1" 
                      Visibility="Collapsed"                       
                      AutoPlay="False"  />

También iniciamos la propiedad AutoPlay con el valor false para que no se ejecuta inmediatamente se carga la página.

Por otro lado el archivo que implementa los eventos es MainPage.xaml.cs:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// La plantilla de elemento Página en blanco está documentada en http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace Proyecto31
{
    /// 
    /// Página vacía que se puede usar de forma independiente o a la que se puede navegar dentro de un objeto Frame.
    /// 
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            mediaElement1.Source = new Uri(BaseUri, "Assets/numeros.mp3");
        }

        private void boton1_Click(object sender, RoutedEventArgs e)
        {
            mediaElement1.Play();
        }

        private void boton2_Click(object sender, RoutedEventArgs e)
        {
            mediaElement1.Pause();
        }

        private void boton3_Click(object sender, RoutedEventArgs e)
        {
            mediaElement1.Stop();
        }

        private void boton4_Click(object sender, RoutedEventArgs e)
        {
            if (mediaElement1.Volume > 0)
            {
                double x = mediaElement1.Volume - 0.10;
                mediaElement1.Volume = x;
            }
        }

        private void boton5_Click(object sender, RoutedEventArgs e)
        {
            if (mediaElement1.Volume < 1)
            {
                double x = mediaElement1.Volume + 0.10;
                mediaElement1.Volume = x;
            }
        }

        private void boton6_Click(object sender, RoutedEventArgs e)
        {
            if (mediaElement1.IsLooping)
            {
                mediaElement1.IsLooping = false;
                boton6.Content = "Reproducir en forma circular";
            }
            else
            {
                mediaElement1.IsLooping = true;
                boton6.Content = "No reproducir en forma circular";
            }
        }
    }
}

En el constructor procedemos a iniciar la propiedad Source del objeto mediaElement1. Se debe cargar un objeto de la clase Uri. Al constructor de la clase Uri le pasamos la propiedad BaseUri (que pertenece a la clase heredada Page) y el path donde se encuentra el archivo mp3:

        public MainPage()
        {
            this.InitializeComponent();
            mediaElement1.Source = new Uri(BaseUri, "Assets/numeros.mp3");
        }

Cuando se presiona el botón "Iniciar ejecución de archivo de audio" se llama al método Play del objeto mediaElement1:

        private void boton1_Click(object sender, RoutedEventArgs e)
        {
            mediaElement1.Play();
        }

Cuando se presiona el botón "Pausar" se llama al método Pause:

        private void boton2_Click(object sender, RoutedEventArgs e)
        {
            mediaElement1.Pause();
        }

Cuando se presiona el botón "Finalizar" se llama al método Stop:

        private void boton3_Click(object sender, RoutedEventArgs e)
        {
            mediaElement1.Stop();
        }

Cuando se presiona el botón "Volumen -" si la propiedad Volume del objeto mediaElement1 es mayor a cero se le resta 0.10:

        private void boton4_Click(object sender, RoutedEventArgs e)
        {
            if (mediaElement1.Volume > 0)
            {
                double x = mediaElement1.Volume - 0.10;
                mediaElement1.Volume = x;
            }
        }

Cuando se presiona el botón "Volumen +" si la propiedad Volume del objeto mediaElement1 es menor a uno se le suma 0.10:

        private void boton5_Click(object sender, RoutedEventArgs e)
        {
            if (mediaElement1.Volume < 1)
            {
                double x = mediaElement1.Volume + 0.10;
                mediaElement1.Volume = x;
            }
        }

Si se presiona el botón que tiene inicialmente la etiqueta "Reproducir en forma circular" se procede a cambiar el valor de la propiedad IsLooping para que el archivo de sonido se reproduzca en forma circular. Si se encuentra reproduciendo ya en forma circular luego se fija la propiedad IsLooping con el valor false:

        private void boton6_Click(object sender, RoutedEventArgs e)
        {
            if (mediaElement1.IsLooping)
            {
                mediaElement1.IsLooping = false;
                boton6.Content = "Reproducir en forma circular";
            }
            else
            {
                mediaElement1.IsLooping = true;
                boton6.Content = "No reproducir en forma circular";
            }
        }

Este proyecto lo puede descargar en un zip desde este enlace :Proyecto31.zip

Retornar