Processing : Réalisation d’un lecteur MP3

Le Processing est un langage de programmation open source qui permet aux développeurs de créer des applications interactives et des visualisations complexes. Il est très populaire auprès des artistes et des designers qui souhaitent créer des œuvres numériques. Dans ce tutoriel, nous allons apprendre à créer un lecteur MP3 avec Processing. Nous verrons comment utiliser les bibliothèques audio pour lire des fichiers MP3 et comment créer une interface utilisateur pour contrôler le lecteur. Nous verrons également comment ajouter des effets audio et des fonctionnalités supplémentaires.

Processing : Réalisation d’un lecteur MP3

Description

On réalise un lecteur MP3 :
- qui permet de charger le fichier son voulu
- qui lance, stoppe, pause, revient, avance dans le fichier à l’aide de « boutons-images »
- le son est réglable dans un slider
- le déroulement du son s’affiche également dans un slider
Je trouve le résultat assez sympa et çà montre comment faire çà avec Processing assez facilement.

Ressources utilisées

La librairie controlP5 fournissant les contrôles GUI
La librairie Minim pour les sons
Ce programme utilise des images boutons à mettre dans votre répertoire du programme (réalisés avec à Inkscape et The Gimp) à partir d’une base trouvée ici.

Ainsi qu’un morceau de musique (libre of course..) !

Explication

On utilise les évènements déclenchés par l’appui sur les boutons pour réaliser les actions voulues.

Le programme

// Programme processing
// généré avec le générateur de code Processing
// X. HINAULT – Janvier 2011 – tous droits réservés

/////////////// Description du programme ////////////
// Utilise un/des objets String (chaîne de caractère)
// Utilise les sons avec la librairie Minim
// Utilise la librairie GUI controlP5
// Utilise un bouton (Button)
// Utilise un champ texte (Textfield)
// Ajoute un bouton et un champ pour chemin fichier

// XXXXXXXXXXXXXXXXXXXXXX ENTETE DECLARATIVE XXXXXXXXXXXXXXXXXXXXXX

// inclusion des librairies utilisées

import ddf.minim.*; // importe la librairie minim de gestion des sons sous Processing
// cette librairie doit être présente dans le répertoire /libraries du répertoire Processing
// voir ici : http://code.compartmental.net/tools/minim/

import controlP5.*; // importe la librairie GUI controlP5
// cette librairie doit être présente dans le répertoire /libraries du répertoire Processing
// voir ici : http://www.sojamo.de/libraries/controlP5/

// déclaration objets

String str1 = « machaine »; // déclare un objet String (chaine de caractère)
String cheminFichier = « mamusique.mp3 »; // déclare un objet String (chaine de caractère)
// le morceau indiqué doit etre dans le rép du prog

// — sons —
Minim minim; // déclare un objet de type Minim de portée globale
AudioPlayer player; // déclare un objet Audioplayer pour lire les sons

ControlP5 controlP5; // déclare un objet principal de la librairie GUI controlP5

Button playButton, rewindButton, pauseButton, avanceButton, stopButton; // déclare un/des objets Button

Button cheminButton; // déclare objet Button

Textfield tf1,tf2; // déclare un/des objets Textfield
Textfield cheminText; // déclare des objets Textfield

Slider sliderVolume; // déclare objet Slider
Slider sliderPosition; // déclare objet Slider

int dureeSon;

// déclaration variables globales

// XXXXXXXXXXXXXXXXXXXXXX Fonction SETUP XXXXXXXXXXXXXXXXXXXXXX

void setup(){ // fonction d’initialisation exécutée 1 fois au démarrage

// —- initialisation paramètres graphiques utilisés
colorMode(RGB, 255,255,255); // fixe format couleur R G B pour fill, stroke, etc…
fill(0,0,255); // couleur remplissage RGB
stroke (0,0,0); // couleur pourtour RGB
rectMode(CORNER); // origine rectangle : CORNER = coin sup gauche | CENTER : centre
imageMode(CORNER); // origine image : CORNER = coin sup gauche | CENTER : centre

// — initialisation fenêtre de base —
size(600, 200); // ouvre une fenêtre xpixels x ypixels
frameRate(30);
background(255,255,255); // couleur fond fenetre

// — initialisation des objets et fonctionnalités utilisées —

//————- initialisation objets de la librairie Minim (sons) —-
// initialise l’objet Minim déclaré – cet objet donne accès à Javasound
minim = new Minim(this); // Initialise l’objet Minim – le parent utilisé est this par défaut

player = minim.loadFile(cheminFichier); // charge le fichier son par défaut dans l’objet Audioplayer

//—- infos sur le fichier sons et objets sons Minim —
println(« **** Infos Audio **** »); // affiche la valeur du volume actuel
player.printControls(); // pour avoir info sur les paramètres sons disponibles et leurs grandeurs
println(« Volume actuel= »+player.getVolume()); // affiche la valeur du volume actuel
println(« Durée Totale= »+player.length()+« ms »); // affiche la taille du fichier
println(« Taille Buffer= »+player.bufferSize()); // affiche la taille du buffer utilisé
println(« Format Audio= »+player.getFormat()); // affiche le format du fichier audio
println(« Taux Echantillonage= »+player.sampleRate()); // affiche le taux d’échantillonage du fichier audio
println(« Type= »+player.type()); // affiche le type du fichier audio (Mono ou stéréo)
println();

//======== Initialisation Objets GUI ControlP5 =========

controlP5 = new ControlP5(this); // initialise l’objet principal de la librairie GUI controlP5

// typeObjet nomObjet=controlP5.addObjet(paramètres); // pour info : déclaration / initialisation possible en 1 ligne
// Textfield field = controlP5.addTextfield(« myWindowTextfield »,70,130,100,20); // exemple

//======== Initialisation Objets Button =========

// addButton(String theName, float theValue, int theX, int theY, int theW, int theH)
// setImages(PImage theImageDefault,PImage theImageOver, PImage theImageActive,PImage theImageHighlight)
// les images doivent etre de la meme taille que bouton, dans rép prog, type .jpg .png ..

//playButton, rewindButton, pauseButton, avanceButton, stopButton

// —- play Button
playButton=controlP5.addButton(« playButton »,0,125,25,100,100); // initialise et ajoute un Button au ControlP5
playButton.setImages(loadImage(« playDefault.png »),loadImage(« playOver.png »), loadImage(« playActive.png »),loadImage(« playDefault.png »));

// —- rewind Button
rewindButton=controlP5.addButton(« rewindButton »,0,25,25,100,100); // initialise et ajoute un Button au ControlP5
rewindButton.setImages(loadImage(« rewindDefault.png »),loadImage(« rewindOver.png »), loadImage(« rewindActive.png »),loadImage(« rewindDefault.png »));

// —- pause Button
pauseButton=controlP5.addButton(« pauseButton »,0,225,25,100,100); // initialise et ajoute un Button au ControlP5
pauseButton.setImages(loadImage(« pauseDefault.png »),loadImage(« pauseOver.png »), loadImage(« pauseActive.png »),loadImage(« pauseDefault.png »));

// —- avance Button
avanceButton=controlP5.addButton(« avanceButton »,0,325,25,100,100); // initialise et ajoute un Button au ControlP5
avanceButton.setImages(loadImage(« avanceDefault.png »),loadImage(« avanceOver.png »), loadImage(« avanceActive.png »),loadImage(« avanceDefault.png »));

// —- stop Button
stopButton=controlP5.addButton(« stopButton »,0,425,25,100,100); // initialise et ajoute un Button au ControlP5
stopButton.setImages(loadImage(« stopDefault.png »),loadImage(« stopOver.png »), loadImage(« stopActive.png »),loadImage(« stopDefault.png »));

//—- le bouton Parcourir chemin
cheminButton=controlP5.addButton(« cheminButton »,0,width–60,height–40,50,24); // initialise et ajoute un Button au ControlP5
cheminButton.setLabelVisible(true); // affichage des labels
cheminButton.setLabel(« PARCOURIR »); // fixe label du bouton
cheminButton.setColorActive(color(255,0,0)); // fixe la couleur active
cheminButton.setColorForeground(color(0,255,255)); // fixe couleur avant

//======== Initialisation Objets Sliders =========

//—— slider Volume —-
// addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
sliderVolume=controlP5.addSlider(« sliderVolume »,0,65536,player.getVolume(),550,10,7,130); // ajoute un Slider au ControlP5
//s1 = (Slider)controlP5.controller(« MonSlider1 »); // initialise l’objet Slider déclaré

// méthodes propres à l’objet Slider
sliderVolume.setNumberOfTickMarks(10); // fixe le nombre crans – n+1 pour n valeurs
//s1.setNumberOfTickMarks((int(s1.max())+1); // fixe le nombre crans – n+1 pour n valeurs
sliderVolume.showTickMarks(false); // affichage des repères
sliderVolume.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

// méthodes communes à tous les controles (objet Controller)
sliderVolume.setLabelVisible(true); // affichage des labels
sliderVolume.setLabel(« VOLUME »); // fixe label objet
//sliderVolume.setDecimalPrecision(2); // fixe la précision
//sliderVolume.setColorActive(color(255,0,0)); // fixe la couleur active
//sliderVolume.setColorBackground(color(255,255,0)); // fixe couleur fond
//sliderVolume.setColorForeground(color(0,0,255)); // fixe couleur avant
//s1.setArrayValue(new float[] {100,255} ); // fixe les valeurs min/max du Slider ?
sliderVolume.setColorCaptionLabel(color(0,0,0)); // fixe couleur Label
sliderVolume.setColorValueLabel(color(255,255,255)); // fixe la couleur valeur

//—— slider Position —-

// addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
sliderPosition=controlP5.addSlider(« sliderPosition »,0,player.length(),player.position(),30,140,500,7); // ajoute un Slider au ControlP5

// méthodes propres à l’objet Slider
//sliderPosition.setNumberOfTickMarks(10); // fixe le nombre crans – n+1 pour n valeurs
//s1.setNumberOfTickMarks((int(s1.max())+1); // fixe le nombre crans – n+1 pour n valeurs
sliderPosition.showTickMarks(false); // affichage des repères
//sliderPosition.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

// méthodes communes à tous les controles (objet Controller)
sliderPosition.setLabelVisible(false); // affichage des labels
sliderPosition.setLabel(« POSITION »); // fixe label objet
//sliderVolume.setDecimalPrecision(2); // fixe la précision
sliderPosition.setColorActive(color(255,0,0)); // fixe la couleur active
sliderPosition.setColorBackground(color(255,255,0)); // fixe couleur fond
sliderPosition.setColorForeground(color(0,0,255)); // fixe couleur avant
//s1.setArrayValue(new float[] {100,255} ); // fixe les valeurs min/max du Slider ?
sliderPosition.setColorCaptionLabel(color(0,0,0)); // fixe couleur Label
sliderPosition.setColorValueLabel(color(255,255,255)); // fixe la couleur valeur

//======== Initialisation Objets Textfield =========

//—- champ texte saisie chemin fichier
// à mettre après création sliderPosition sinon évènement champTexte généré avant création sliderPosition
cheminText=controlP5.addTextfield(« cheminText »,10,height–40,300,20); // initialise et ajoute un Textfield au ControlP5
cheminText.setAutoClear(false); // autoeffacement après return
cheminText.setValue(cheminFichier+ » « ); // initialise Texte du champ
cheminText.setLabelVisible(true); // affichage des labels
cheminText.setLabel(« CHEMIN »); // fixe label
cheminText.setColorActive(color(255,0,0)); // fixe la couleur active
//cheminText.setColorForeground(color(0,255,255)); // fixe couleur avant

} // fin fonction Setup

// XXXXXXXXXXXXXXXXXXXXXX Fonction Draw XXXXXXXXXXXXXXXXXXXX

void draw() { // fonction exécutée en boucle

// Accès à la valeur des objets GUI controlP5

//println(« Valeur Button= « + b1.value());
//delay(100);

//— accès à la valeur courante du Textfield —
//println(« Valeur Textfield= « + tf1.value());
//println(« Texte Textfield= « + tf1.getText());
//delay(100);

// —- si la lecture est finie, on revient au début
if (player.position()==player.length()) player.rewind();

//—- met à jour la position du sliderPosition
sliderPosition.setValue(player.position());

// while(true); // stoppe boucle draw

} // fin de la fonction draw()

// XXXXXXXXXXXXXXXXXXXXXX Autres Fonctions XXXXXXXXXXXXXXXXXXXXXX

//————- Fonction d’arret de la librairie Minim —-

void stop(){ // fonction d’arrêt de la librairie Minim

// toujours fermer les objets Minim
player.close();
minim.stop();
super.stop();

}

// Gestion des évènements des objets GUI controlP5 —-

//—— fonction gestion globale des évènements GUI controlP5
public void controlEvent(ControlEvent theEvent) {
//println(theEvent.controller().name());// affiche le nom de l’évènement
}

// —— gestion évènement Button ——

void rewindButton(int theValue) { // fonction évènement Button de meme nom – reçoit la valeur
println(« Evènement Button REWIND avec valeur = « +theValue);

player.skip(–10000); // recule de 10 seconde
}

void playButton(int theValue) { // fonction évènement Button de meme nom – reçoit la valeur
println(« Evènement Button PLAY avec valeur = « +theValue);
//————- code type lecture fichier son —-

player.play(); // lance la lecture du son
//delay (in.length()+500); // attend la durée du son + délai

}

void pauseButton(int theValue) { // fonction évènement Button de meme nom – reçoit la valeur
println(« Evènement Button PAUSE avec valeur = « +theValue);

player.pause(); // pause et reste à la position actuelle

}

void avanceButton(int theValue) { // fonction évènement Button de meme nom – reçoit la valeur
println(« Evènement Button AVANCE avec valeur = « +theValue);

player.skip(10000); // avance de 10 secondes
}

void stopButton(int theValue) { // fonction évènement Button de meme nom – reçoit la valeur
println(« Evènement Button STOP avec valeur = « +theValue);

player.rewind(); // revient au début
player.pause(); // pause
}

//—- evenement bouton chemin fichier

void cheminButton(int theValue) { // fonction évènement Button de meme nom – reçoit la valeur

println(« Evènement cheminButton avec valeur = « +theValue);

cheminFichier=selectInput(« Choisir un fichier »); // ouvre fenetre systeme sélection fichier
// la variable cheminFichier mémorise le chemin sélectionné

if (cheminFichier!=null) { // si un chemin fichier est sélectionné
println(« Le chemin est : « +cheminFichier);
cheminText.setValue(cheminFichier+ » « ); // met à jour le champ chemin

}

} // fin evènement bouton fichier

// —— gestion évènement Textfield ——
public void textfieldA(String theText) { // fonction évènement Textfield de meme nom – déclenché par return – reçoit la chaine
println(« Evènement Textfield A avec valeur = « +theText);
}

public void textfieldB(String theText) { // fonction évènement Textfield de meme nom – déclenché par return – reçoit la chaine
println(« Evènement Textfield B avec valeur = « +theText);
}

//—- evenement champ texte chemin fichier

public void cheminText(String theText) { // fonction évènement Textfield de meme nom – déclenché par return – reçoit la chaine

println(« Evènement CheminText avec valeur = « +theText);

cheminFichier=trim(theText); // mémorise le contenu du champ sans l’espace

println(« Le chemin est : »+cheminFichier);

player.close(); // ferme le player
player = minim.loadFile(cheminFichier); // charge un fichier son dans l’objet Audioplayer
// taille par défaut du buffer 1024
// le fichier doit etre dans le répertoire /mes_sons/ meme niveau que rep programme

println();
println(« ***** infos fichier son **** »);
println(« Durée Totale= »+player.length()+« ms »); // affiche la taille du fichier
println(« Format Audio= »+player.getFormat()); // affiche le format du fichier audio
println();

dureeSon=player.length();

//mise à jour valeur max sliderPosition
//sliderPosition.setMax(float(dureeSon)); // fixe la valeur max du slider sur la durée du morceau
controlP5.remove(« sliderPosition »); // supprime le sliderPosition actuel

//— réinitialise le sliderPosition
sliderPosition=controlP5.addSlider(« sliderPosition »,0,player.length(),player.position(),30,140,500,7); // ajoute un Slider au ControlP5

} // fin evènement champ texte chemin fichier

// —— gestion évènement Slider ——
void sliderVolume (float valeur) { // fonction évènement Slider de meme nom – reçoit la valeur
println(« Evènement Slider Volume avec valeur = « +valeur);