1. Accueil
  2. Tutoriels
  3. C# / .NET
Merci
0
Merci

Quelques mots de remerciements seront grandement appréciés.

Un lecteur audio WPF en 4h

Dernière mise à jour le par BunoCS.

Un lecteur WPF en 4h



Introduction

Objectifs


Tutoriel expliquant comment réaliser un lecteur audio rudimentaire en manipulant les technologies du framework 3.0 (WPF, XAML) et le langage C#

Objectif : se familiariser avec les technologies WPF (Windows Presentation Foundation) et XAML en créant un lecteur audio MP3/WMA rudimentaire.

Aspect général de l'application



L'application est basique et son but est avant tout pédagogique. Elle se présente de la manière suivante : Un bouton « Parcourir », qui lorsque l'on clique dessus explore le disque dur afin de sélectionner le fichier audio à lire. Nous l'appellerons btnParcourir.

Une fois sélectionné, le chemin complet du fichier s'affiche dans le contrôle Label « Chemin du fichier sélectionné » que nous appelerons pour simplifier le Chemin. On peut alors cliquer sur le contrôle bouton Lecture que nous appellerons btnLecture, pour lancer l'écoute du fichier. Nous pouvons soit appuyer sur le bouton Pause, que nous appellerons btnPause, pour mettre la lecture en pause, soit appuyer sur le bouton Stop que nous appellerons btnArret, pour stopper la lecture et remettre au début le fichier.

Pré-requis


Pour exécuter l'application:
  • .Net Framework 3.0
  • Direct X 9.0 (DirectX.Audio VideoPlayBack.dll)

Pour réaliser l'application:

Réalisation


Ouvrir Visual C# Express 2008. Choisir dans le Menu File -> New Project -> WPF Application


Aspect de l'IDE

XAML - Présentation


Placer ce code dans l'éditeur XAML (fichier Windows1.Xaml) 

<Window x : Class="Myriam.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Myriam - Lecteur audio WPF" Height="303.485" Width="530.932">

    <Grid Height="187.427">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="102.051*" />

            <ColumnDefinition Width="14.674*" />

            <ColumnDefinition Width="74.709*" />

            <ColumnDefinition Width="317.492*" />

        </Grid.ColumnDefinitions>

        <Button Height="23" HorizontalAlignment="Right" Margin="0,22.011,27.347,0" Name="btnParcourir" VerticalAlignment="Top" Width="60.03" Click="btnParcourir_Click" Grid.Column="3"> ... </ Button>

        <Label Height="28" Margin="12.673,22.011,118.059,0" Name="lChemin" VerticalAlignment="Top" Grid.ColumnSpan="4" OpacityMask="Chocolate" BorderBrush="Chocolate" Foreground="BlueViolet">

        <Label.BitmapEffectInput>

            <BitmapEffectInput AreaToApplyEffectUnits="Absolute" />

        </Label.BitmapEffectInput>

        <Label.BitmapEffect>

            <BlurBitmapEffect Radius="1" KernelType="Box" />

        </Label.BitmapEffect> Fichier sélectionné </ Label>

        <Image Margin="12.673,57.362,19.343,85.376" Name="imgPlay" Stretch="Fill" Source="file:///C:/Users/myriam/Desktop/btnPlay.png" />

        <Image Margin="0,57.362,25.346,85.376" Name="imgPause" Source="file:///C:/Users/myriam/Desktop/btnPause.png" Stretch="Fill" Grid.ColumnSpan="3" HorizontalAlignment="Right" Width="70.036" />

        <Image Margin="64.699,57.362,0,85.376" Name="imgStop" Source="file:///C:/Users/myriam/Desktop/btnStop.png" Stretch="Fill" Grid.Column="2" Grid.ColumnSpan="2" HorizontalAlignment="Left" Width="70.036" />

        <Button Margin="12.673,57.362,19.343,85.376" Name="btnLecture" Opacity="0" Click="btnLecture_Click"> Lecture </ Button>

        <Button Margin="0,57.362,32.683,85.376" Name="btnPause" Grid.ColumnSpan="3" HorizontalAlignment="Right" Width="62.698" Opacity="0" Click="btnPause_Click"> Pause </ Button>

        <Button Grid.Column="2" Margin="64.699,57.362,0,85.062" Name="btnArret" Grid.ColumnSpan="2" HorizontalAlignment="Left" Width="62.698" Opacity="0" Click="btnArret_Click"> Arret </ Button>

    </Grid>

</ Window>


On peut raffiner un peu le résultat, en utilisant des images à la place des boutons. Mais faute d'avoir trouvé l'évènement Click pour le contrôle Image, j'ai dû ruser en superposant pour chaque image un contrôle bouton transparent (opacity = 0).
Ce qui doit vous donner un résultat proche de ceci :

Ajouter les assemblies adéquates


Pour que l'application fonctionne, il lui faut en plus des assemblies de base d'une application XAML, les assemblies System.Windows.Forms et Microsoft.DirectX.AudioVideoPlayBack.


Ne pas oublier dans le fichier de code Window1.xaml.cs de préciser l'importation de ces assemblies (directive Using).


Double-cliquer dans l'IDE sur le contrôle btnParcourir. On se retrouve alors dans la couche métier (fichier Window1.xaml.cs)

C# Fonction Parcourir


Dans la fonction btnParcourir_Click, tapez le code suivant : 

Stream myStream = null;
OpenFileDialog ofd = new OpenFileDialog ();

ofd.Filter = "Fichiers Audio|*.mp3;*.wma";
ofd.Title = "Ouvrir un fichier musical";

if (ofd.ShowDialog().ToString() == "OK" )
{
    try
    {
        if ((myStream = ofd.OpenFile()) != null )
        {
            using (myStream)
            {
                lChemin.Content = ofd.FileName;
                try
                {
                    if (lecture == true )
                    {
                        lecteur.Stop();
                        lecteur.Dispose();
                    }
                    lecteur = new Audio (ofd.FileName);
                    lecteur.Play();
                    chemin = ofd.FileName;
                    lecture = true;
                }
                catch ( Exception ex)
                {
                }
            }
        }
    }
    catch ( Exception ex)
    {
        lChemin.Content = "Impossible de lire le fichier audio " + ex.Message;
    }
}


Lorsque l'on clique sur le bouton btnParcourir une fonction est appelée qui déclenche l'ouverture de la fenêtre de dialogue OpenFileDialog (fenêtre de dialogue Windows d'ouverture de fichier), dont nous instancierons la classe en l'appelant « ofd » . On filtre les résultats, en utilisant la propriété Filter de l'ofd, pour n'afficher que les fichiers portant l'extension MP3 et WMA.

Si la fenêtre de dialogue donne pour résultat « Ok », alors on commence par vérifier qu'aucun fichier n'est déjà en cours de lecture. Si au contraire il y en a un, on l'arrête grâce à la méthode Stop() de la classe Audio (objet lecteur) et libère la mémoire utilisée par cet objet grâce à la méthode Dispose().

Lecture préexistante ou non, on peut lancer la lecture, en instanciant la classe lecteur qui est de type Audio (élément DirectX servant à manipuler des fichiers musicaux). On lance la lecture, en appelant tout simplement la méthode Play() de l'objet lecteur (Audio), sans oublier de gérer les exceptions, car par défaut l'instanciation du fichier Audio lève une exception. On n'oublie pas d'attribuer à la propriété lecture, la valeur true et d'attribuer à la propriété chemin le chemin sélectionné par la fenêtre de dialogue Windows.

Une fois cette étape effectuée, le plus dur est fait. Il nous reste à gérer l'arrêt de l'écoute d'un fichier et la mise en pause.

C# Fonction Lecture


En double-cliquant dans l'IDE sur le bouton btnLecture, on déclenche l'évènement Click et la méthode correspondante. 

private void btnLecture_Click(object sender, RoutedEventArgs e)
{
    try
    {
        if (chemin != null)
        {
            if (pause == false)
            {
                lecteur = new Audio (chemin);
            }
            lecteur.Play();
            lecture = true;
            pause = false;
        }
    }
    catch ( Exception ex)
    {
    }
}


Rien de particulier à dire. Là encore on instancie la classe lecteur de type Audio en lui donnant pour paramètre le chemin précédemment stockée (méthode Parcourir).

On n'oublie pas de gérer le cas, où un utilisateur peu habile clique sur le bouton Lecture sans avoir au préalable sélectionné de fichier musical. 
If chemin != null
.

Si le fichier n'est pas en pause on instancie un nouvel objet lecteur.

C# Fonction Pause


private void btnPause_Click( object sender, RoutedEventArgs e)
{
    try
    {
        if (lecture == true)
        {
            lecteur.Pause();
            lecture = false;
            pause = true;
        }
    }
    catch ( Exception ex)
    {
    }
}


Très simple, cette fonction vérifie que le fichier est en phase de lecture, elle appelle la méthode Audio.Pause(), qui met effectivement le fichier en pause, attribue du coup VRAI au booléen pause, et FALSE au booléen lecture.

C# Fonction Arrêt


private void btnArret_Click(object sender, RoutedEventArgs e)
{
    try
    {
        if (lecture == true)
        {
            lecteur.Stop();
            lecteur.Dispose();
            lecture = false;
        }
    }
    catch (Exception ex)
    {
    }
}


Avant de stopper le morceau, on vérifie qu'il y a bien un fichier en cours de lecture (
if lecture == true.
). Si cette condition est atteinte, on arrête la lecture, en appelant la méthode Audio.Stop(). On libère alors la ressource occupée par le lecteur, en appelant la méthode Audio.Dispose(), sans oublier de mettre le booléen lecture du coup à false.

Conclusion


Par ce bref tutoriel vous avez appris à réaliser un mini lecteur MP3 en utilisant les technologies WPF et XAML. Ces technologies semblent prometteuses, puisqu'elles ont l'énorme avantage de dissocier totalement la couche Présentation de la couche Métier, idée relativement évidente dans une architecture web, mais plutôt étrangère aux architectures Windows classiques. XAML se propose donc de réunir le meilleur du monde Windows et du monde Web

A voir également

Ce document intitulé « Un lecteur audio WPF en 4h » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.

14 Commentaires