Créer un player de MP3 en FLASH

le 31 octobre 2009 • Flash • par Dawlin

Bonjour à tous, suite à de nombreuses demandes et à une prédiction de SiMax, je vous fais un magnifique tuto pour arriver à créer vous-même votre propre lecteur de mp3 facilement, simplement et efficacement !

I - Le Design

Donc déjà vous allez vous créer un bouton simple avec juste un fond que vous allez nommer dans la bilbiothèque

"btn_sample" :

Ensuite, on va le dupliquer 3 fois sur le même calque, que l'on va appeler "btns" :

Ces trois boutons auront pour nom d'occurrence respectivement :

btn1

btn2

btn3

On aurait pu les appeler "btn_play", "pause" et "stop" mais non... puis sur un calque par dessus que l'on va appeler "btns_textes" on place les icônes des contenus de chaque bouton :

Une fois les boutons terminés, on va se faire un clip "barre" qui contiendra le design de la barre de chargement, et on le met :

Une fois sur un calque en dessous, à alpha (opacité) 50%
Une fois sur un calque au dessus, à pleine couleur, et à occurence "barre_loaded"
une fois sur un calque encore au dessus, à teinte rouge 32%, et à occurence "barre_played"

Vous vous en doutez ces barres vont définir l'avancement du chargement et la lecture...

En plus en dessous, pour rire, si vous voulez créez vous un champ de texte dynamique qui affiche une variable appellée "pourcent", et un autre qui affichera une variable appellée "joue".

En dessous encore un bouton "moins" d'occurence "btnv2" et un bouton "plus" d'occurence "btnv1" avec un champ de texte qui affiche la variable "volt"...

Nous créerons ces variables plus tard, pour l'instant ça doit vous donner ça :

Après dans ce design là, vous prenez que ce qui vous intéresse, si vous voulez pas la barre mais que le champ de texte, c'est pas grave...

Et maintenant... codons !!

II - Le codage

Donc là c'est tout simple, je vous balance le code en version ultra-commentée, et voilà :



// ici l'adresse du fichier MP3 à charger
f = "mon_fichier.mp3";



//auparavant je déclare ma petite fonction arrondir dont j'aurais besoin
//arrondir(x, y);
//On arrondi x à y chiffres après la virgule :
arrondir = function(vnombre,vvirgule){
	nombre = vnombre;
	//10 puissance vvirgule, vvirgule étant le nombre qu'on veut de chiffres après la virgule
	virgule = Math.pow(10,vvirgule);
	
	arrondi=(Math.round(nombre*virgule))/virgule;
	return(arrondi);
}



//On crée une variable de type Sound...
//La fonction new ... c'est pour créer une nouvelle variable vide de type ...
son = new Sound();
//chargement externe dans la variable son
son.loadSound(f); 
//chargement interne dans la blibli (qu'on ne met pas) :
//son.attachsound("occurence blibliotheque");

//Ici,on va attendre que au moins 10 secondes de la chanson soient chargées pour play
son.setBufferTime(10);
//mais ça ne marche pas car il veut absolument qu'on ai chargé la chanson à 100%... je sais pas pourquoi o_O

//Le volume ! important :
vol = 60;
son.setVolume(vol);
//Et puis pour le champ de texte avec le volume, c'est + lisible :
volt = vol/10;


//La position (où on en est dans la chanson)
p = 0;

//on initialise la taille de la barre_played
barre_played._width= 0.1;
 
//on met boolean pour éviter que quand on clique 5 fois sur play, ça play 5 fois par dessus
var bool:Boolean = false;


 //Le bouton 1 (play) quand on clic ...
btn1.onPress = function() {
//Si la position du son est égale à la durée du son, on la remet à zéro
if(son.position == son.duration) {
	p = 0;
	}
//on vérifie si la lecture est autorisée
if(bool == false){
//on start le son à partir de la position p
son.start(p/1000);
//puis on l'interdis
bool = true;
}
//Pourquoi /1000 ? parceque p est en millième
}
 
//Bouton 2 (pause) :
btn2.onPress = function() {
//On arrete le son
son.stop();
//on stock la position dans p pour quand on recliquera sur play
p = son.position;
// on autorise la lecture
bool = false;
}

//Bouton 3 (stop) :
btn3.onPress = function() {
//On arrete le son
son.stop();
//on remet la position à 0
p = 0
// on autorise la lecture
bool = false;
}


this.onEnterFrame = function(){
	//Variable avec le total des bytes
	total = son.getBytesTotal();
	//variable avec les bytes chargées
	loaded = son.getBytesLoaded();
	
	//On en fait un pourcentage arrondi à la virgule
	pourcent = arrondir((loaded/total)*100,0);
	//et on donne ça comme taille à barre_loaded (*2 parceque ma barre fait 200 et non 100px)
	barre_loaded._width = pourcent*2;
	
	//passons à la barre_played, même démarche
	total2 = son.duration;
	played = son.position;
	
	//cette fois-ci on arrondi pas pour plus de fluidité
	pourcent2 = (played/total2)*100;
	//et on donne la taille :
	barre_played._width = pourcent2*2;
	
	//et pour le champ de texte, on lui arrondi
	joue = arrondir(son.position/1000,0);
}

//et puis bon, on s'ajoute des boutons de volumes !
btnv1.onPress = function(){
//On ajoute 10 (parceque 1 en flash ça vaut pas beaucoup)
vol += 10;
//on simplifie pour le champ de texte
volt = vol/10;
//et on le soumet au volume :
son.setVolume(vol);
//on pourrait mettre une limite, mais on le pense pas à nos visiteurs, et on va les laisser se démonter les tympans
}

btnv2.onPress = function(){
//On enlève 10 (parceque 1 en flash ça vaut pas beaucoup)
vol -= 10;
//on simplifie pour le champ de texte
volt = vol/10;
//et on le soumet au volume :
son.setVolume(vol);
}

Note : on pourrait faire comme un copain à moi, un bouton qu'on peut draguer

à l'horizontale et que le volume et égale à bouton._x au lieu de faire juste des

boutons + et -... à voir...

Maintenant approfondissons le biniou... je veux que quand je clique sur un endroit de la barre, ça me mette la lecture à partir de ce point... je crée donc une autre barre par dessus toutes les autres avec une occurrence "barre_click" mais une opacité (alpha) 0%, et je réfléchis à comment je vais me débrouiller :

j'ai ma position p du son, quand je clique sur la barre j'obtiens une position de la souris en _x, il ne me reste qu'à faire un rapport avec une règle de 3, où x/largeur_barre = p/longueur_son...

Ce qui nous donne, quand on clique sur la barre :


//quand on clique sur la barre...
barreclick.onPress = function(){
// on capte la position en _x de la souris par rapport à la barre
	px = this._xmouse; // soit barreclick._xmouse
// on fait une règle de 3 :
// la position dans la chanson égale la position en _x * la durée du son le tout / la largeur de la barre
p = (px*son.duration)/this._width;
// on arrête le son pour éviter la double lecture,
son.stop();
//et on relance le son !
son.start(p/1000);
}

Et youhouhouuu ça marche !!

Donc maintenant je suis fatigué alors je vous met le résultat :

Et puis n'oubliez pas de télécharger la source

Voilà, merci d'avoir suivi ce tutoriel qui s'inscrit dans la suite de tutoriels flash,

Dawlin

Créer un player de MP3 en FLASH

I - Le Design

II - Le codage

Lisez aussi...

Flash : Le principe d'une Map

Flash : Charger et exploiter un fichier XML externe