Affichage du lecteur MP3 - Contrôles de lecture

Aujourd’hui, on va continuer sur notre belle lancée et reproduire toute une série de boutons pour contrôler le média.

La guerre des boutons

Pour écouter de la musique, notre utilisateur a besoin de fonctions clés comme : jouer un morceau, passer à la piste suivante, etc. Si tu te souviens de la maquette, on avait une rangée principale de 5 boutons :

La différence avec le bouton “ENTER” de la page d’accueil, c’est qu’ici, nos 5 boutons représentent une image cliquable. Pour les reproduire dans l’app, on fera donc appel au composant ImageButton.

Mais tout d’abord, il faudra ajouter ces fameuses images au projet. Commence donc par les télécharger sur ton ordinateur :

Puis décompresse le fichier obtenu. Tu devrais avoir les 6 images suivantes :

En effet, il y aura bien 5 boutons sur cette rangée. Mais rien ne nous empêche de remplacer l’image du bouton par une autre !

Si tu reprends la maquette, il y aura de gauche à droite :

• un bouton pour rejouer la piste musicale (une seule fois) ⇒ c’est l’image repeat_once.png

• un autre pour revenir à la chanson précédente ⇒ skip_previous.png

• on aura aussi un gros bouton central pour jouer ou mettre en pause la musique. C’est l’image de ce bouton qui changera automatiquement selon les cas suivants :

  • soit la piste n’est pas en cours de lecture ⇒ ce sera l’image play.png

  • ou bien elle est déjà en train d’être jouée ⇒ on affichera alors pause.png

• puis on aura un bouton pour passer à la chanson suivante ⇒ skip_next.png

• et un dernier pour télécharger le morceau ⇒ download.png

Oui je sais, cette dernière fonction “télécharger” n’était pas prévue au programme ! Çà devait initialement être pour lire les titres en mode aléatoire, mais j’ai changé d’avis. 😄

Comme quoi, c’est important de concevoir une maquette aussi fiable que possible !

Ajouter les images au projet

Maintenant que tu as téléchargé toutes les images, tu dois les importer dans le projet pour qu’elles deviennent utilisables par l’application. Pour cela, ouvre le projet dans Visual Studio et fais un clic droit sur le dossier Images :

Dans le menu contextuel qui s’affiche, dans la section Ajouter, clique sur l’option pour ajouter des fichiers depuis un dossier :

Puis, sélectionne le dossier où tu as décompressé les 6 images et valide ton choix. Une fenêtre apparaît alors pour choisir les fichiers à inclure dans le projet.

Dans notre cas, on veut importer toutes les images du dossier. Sélectionne donc tous les fichiers disponibles et clique sur OK :

Voilà c’est terminé, vérifie que tu as bien les 6 nouvelles images importées dans le dossier !

Découverte des ImageButton

Maintenant que les images sont prêtes à l’emploi, on passe au code !

Définissons d’abord les deux boutons les plus petits (ceux aux extrémités) :

Nom du fichier :MusicPlayerView.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

ImageButton RepeatOnceButton => new ImageButton
{
    CornerRadius = 5,
    HeightRequest = 25,
    WidthRequest = 25,
    Source = "repeat_once.png",
    BackgroundColor = Colors.Black
};

ImageButton DownloadButton => new ImageButton
{
    CornerRadius = 5,
    HeightRequest = 25,
    WidthRequest = 25,
    Source = "download.png",
    BackgroundColor = Colors.Black
};

Comme tu peux le constater, on leur a défini une petite taille de forme carrée (25 de hauteur sur 25 de largeur), à fond noir et aux coins légèrement arrondis (via la propriété CornerRadius). Puis, ils ont eu chacun leur propre image assignée grâce à la propriété Source, en lui passant le nom du fichier correspondant.

Reste alors à définir les 3 boutons pour contrôler la lecture du morceau, en ayant toujours recours à l’ImageButton :

Nom du fichier :MusicPlayerView.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

ImageButton SkipPreviousButton => new ImageButton
{
    HeightRequest = 75,
    WidthRequest = 75,
    Source = "skip_previous.png"
};

ImageButton PlayButton => new ImageButton
{
    CornerRadius = 50,
    HeightRequest = 100,
    WidthRequest = 100,
    Source = "play.png",
    BackgroundColor = Colors.Black
};

ImageButton SkipNextButton => new ImageButton
{
    HeightRequest = 75,
    WidthRequest = 75,
    Source = "skip_next.png"
};

Finalement, ce n’est pas tellement différent ! Cependant, tu noteras que ces contrôles sont plus grands, et surtout, les boutons SkipPrevious et SkipNext n’ont pas de couleur de fond.

Au contraire, le bouton Jouer, lui, est doté d’un arrière-plan noir et a les coins très arrondis… tellement arrondis que la forme n’est plus carrée, mais ronde !

La technique est très simple : les valeurs de HeightRequest et WidthRequest doivent être identiques, tandis que celle du CornerRadius doit leur être deux fois inférieure. Ainsi, si tu veux un bouton de forme ronde avec une hauteur de 200, son arrondissement devra avoir une valeur de 100.

Préparation pour la démo

Allez, il est désormais temps pour toi de répartir ces nouveaux contrôles sur la deuxième ligne du BottomLayout ! Étant donné qu’on a 5 boutons pour 7 colonnes, tu auras peut-être opté pour la disposition suivante :

Nom du fichier :MusicPlayerView.cs

1
2
3
4
5

RepeatOnceButton.Row(1).Column(1),
SkipPreviousButton.Row(1).Column(2),
PlayButton.Row(1).Column(3),
SkipNextButton.Row(1).Column(4),
DownloadButton.Row(1).Column(5)

Si, bien sûr ! Tu as forcément dû relancer ton app pour vérifier, et le rendu n’est pas si mal.

Pour ma part, j’ai préféré recréer un Grid spécialement pour englober les boutons Play, SkipPrevious et SkipNext, comme ceci :

Nom du fichier :MusicPlayerView.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

Grid MediaControlLayout => new Grid
{
    ColumnDefinitions = Columns.Define(
            Stars(30),
            Stars(40),
            Stars(30)),
    ColumnSpacing = 0,
    Children =
    {
        SkipPreviousButton.Column(0),
        PlayButton.Column(1),
        SkipNextButton.Column(2)
    }
};

Il s’agit seulement d’une grille divisée en trois colonnes, avec chacune une taille spécifique. Ainsi, le bouton Play prendra un peu plus d’espace que les deux autres. Mais bon, tout ça est devenu facile pour toi, tu commences à maîtriser maintenant ! 😎

Allez, il ne reste plus qu’à positionner le MediaControlLayout de cette façon :

1
2
3

RepeatOnceButton.Row(1).Column(1),
MediaControlLayout.Row(1).Column(2).ColumnSpan(3),
DownloadButton.Row(1).Column(5)

Et hop, ça y est, ça commence vraiment à prendre forme ! 🤩

Tu t’en es vraiment bien sorti, continue comme ça ! D’ailleurs, il nous reste encore la gestion du volume de la musique à reproduire dans l’app, et c’est justement l’objet du prochain chapitre !

Plus d’articles dans la même série:

Ma toute première app en .NET MAUI
Installation du projet .NET MAUI
Première exécution de l’app .NET MAUI
Le MVVM, pour une application réussie
Naviguer vers une nouvelle page en .NET MAUI
Agencer les éléments d'une page .NET MAUI
Affichage du lecteur MP3 - Durée d'écoute
Affichage du lecteur MP3 - Contrôles de lecture
Affichage du lecteur MP3 - Volume
Écouter de la musique en .NET MAUI avec MediaElement
Contrôler la tête de lecture avec MediaElement
Contrôler le volume avec MediaElement
Télécharger un fichier audio en .NET MAUI
Écouter une playlist avec MediaElement
Créer des animations avec .NET MAUI pour une ambiance disco