Aller au menu - Aller au contenu

Icône Un lecteur MP3 en flash

Par Avatar Gora
Mise à jour : 26/02/2009
Creative Commons BY-NC-SA
258 visites depuis 7 jours, classé 370/786
Bonjour,

Dans ce tutoriel, je vais vous apprendre à créer votre propre lecteur MP3 exportable en flash.
Vous connaissez sans doute les mini-lecteurs flash souvent utilisés sur les blogs, comme celui-ci par exemple.

Si vous y arrivez (ceci est au conditionnel :lol: ), vous pourrez enfin frimer avec votre joli petit lecteur !

Let's go !
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

Théoriquement

Théoriquement, notre lecteur mp3 doit être exportable pour pouvoir être utilisé sur diverses pages web ; nous utiliserons donc le code suivant pour le placer :

Code : HTML
1
2
3
<object type="application/x-shockwave-flash" data="lecteur.swf?fichier=mamusique.mp3" width="LARGEUR" height="LONGUEUR">
  <param name="movie" value="lecteur.swf?fichier=mamusique.mp3" />
</object>


Pour commencer, nous n'allons utiliser que les boutons Play, Pause et Stop, nous verrons ensuite les possibilités annexes. ;)
Retour en haut

Mise en place des boutons de lecture

Commençons. Tout d'abord, pour permettre une lecture sonore plus agréable, il nous faut des boutons Play, Pause, et Stop. Si vous savez faire par vous-mêmes vos boutons, faites-le ; vous aurez un lecteur personnalisé. Si vous ne savez pas les faire, utilisez les bibliothèques communes. Ou alors vous pouvez prendre les boutons du fichier source disponible à la fin de ce tuto !

C'est bien, mais c'est quoi, les bibliothèques communes ?


Les bibliothèques communes (Fenêtre -> Bibliothèques communes) se divisent en trois catégories : les boutons, les classes et les interactions de formations. Ce sont des composants livrés avec le logiciel que vous possédez et parfois très utiles.
Dans notre cas, nous allons nous intéresser aux boutons.

Choisissez les boutons que vous souhaitez. Sur le Calque 1 que vous renommerez lecteur, vous placerez ces boutons comme vous le voulez !

Avant de passer à l'étape suivante, nous allons nommer une occurrence pour chacun de ces boutons qui permettra au code ActionScript de les reconnaître pour les actionner (et c'est le cas de le dire ^^ ).

Image utilisateur


Donc, nous allons nommer respectivement l'occurrence de nos boutons Play, Stop et Pause : btnLecture, btnStop, et btnPause.

Vous êtes prêts ? Maintenant, nous allons passer à la plus grosse partie de ce tutoriel : le code (il ne manque plus que la musique de Rocky pour nous mettre dans l'ambiance :lol: ).
Retour en haut

L'ActionScript

Maintenant, nous allons placer l'ActionScript.

Rappel : l'ActionScript est un langage de programmation utilisé au sein des applications Flash d'Adobe. Ce langage nous permet d'ajouter de l'interactivité aux animations flash en répondant aux actions de l'utilisateur.
L'ActionScript ce place dans "le panneau de programmation ActionScript" (F9).


1 - Introduction des fonctions sur les boutons



Tout d'abord, nous allons appeler les fonctions du méga-code-final sur nos boutons en modifiant leurs comportements ; sélectionnez un bouton et ouvrez le panneau de programmation : si tout est bon, vous verrez un onglet en bas à gauche du panneau avec le nom de l'occurrence du bouton.

Trêve de bavardages, voici le code :

Code : Autre
1
2
3
4

on (release) //Si l'utilisateur a cliqué sur le bouton, on continue
{
  _root.lecture(); //Ici, on appelle la fonction
}


Bien sûr, vous n'allez pas laisser _root.lecture(); sur chaque bouton ; par exemple, pour Stop, on va utiliser _root.stop(); et pour Pause _root.pause();.

Ensuite, nous allons créer un nouveau calque que l'on nommera actions. Je vais fournir bout à bout le code ainsi que les explications pour que ce soit plus clair. ^^

Je vous déconseille fortement d'utiliser plusieurs images-clefs. Tout au long de ce tuto, nous resterons sur la première image de l'animation.


Ouvrez le panneau de programmation ActionScript sur le calque actions.

3 - Déclaration des principales variables



Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12

//Tout d'abord, nous déclarons les principales variables

var decalage = 0;
var charge = false;
var temps, si;

//Les propriétés du son joué

chanson = new Sound();
chanson.onSoundComplete = function() {
  _root.stop();
};


Ici, nous avons commencé par déclarer les principales variables. decalage et temps nous serviront principalement pour le bouton Pause, charge nous servira à boucler la musique quand elle sera terminée.

3 - Déclaration des fonctions des différents boutons du lecteur



Code : Autre
1
2
3
4
5
6
7
8

//On déclare la fonction stop

function stop()
{
  clearInterval(si);
  chanson.stop();
  decalage = 0;
}


Voici la fonction pour le bouton Stop, très simple ; on stoppe la chanson puis on la reprend du début au prochain démarrage.

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

//On déclare la fonction pause

function pause() 
{
  clearInterval(si);
  chanson.stop();
}

//Puis la fonction memoire liée à celle du dessus

function memoire() 
{
  decalage = chanson.position/1000;
}


Ça se complique ; ici, nous déclarons la fonction pause quasiment comme au-dessus, puis, grâce à la fonction memoire, le lecteur va se souvenir où l'utilisateur a stoppé la musique via chanson.position, et enfin /1000 signifie que la chanson sera reprise 1 seconde avant qu'elle soit stoppée.

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

//On déclare la fonction lecture

function lecture() 
{
  if (charge == false) //Si la chanson n'est pas chargée
  {
    chanson.onLoad = function(ok) //On la charge
        {
      if (ok=true) //Si elle est chargée
         {
        charge = true; 
        temps = Math.round(chanson.duration/1000);
        chanson.start(); //On lit la chanson s'il y a plus d'une seconde d'écart entre le chargement et l'état de la lecture
        si = setInterval(memoire, 1000);
      }
    };
    chanson.loadSound(fichier, true); //Dans le cas contraire, on charge la chanson
  } 
  else 
  {
    chanson.start(decalage); //Si la chanson est stoppée par l'utilisateur via la fonction pause, la variable decalage est prise en compte
    si = setInterval(memoire, 1000); //De même pour memoire
  }
}


Et enfin, le gros bloc de code pour conclure. :D
On déclare la fonction lecture, la plus complexe ; si la chanson n'est pas chargée, on la charge ; si elle est chargée et qu'il y a plus d'une seconde d'écart entre le chargement et l'état de la lecture, on la lit. Dans le cas contraire, on la stoppe jusqu'à ce que ça se produise.

4 - Le code final



Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

//Tout d'abord, nous déclarons les principales variables

var decalage = 0;
var charge = false;
var temps, si;

//Les propriétés du son joué

chanson = new Sound();
chanson.onSoundComplete = function() {
  _root.stop();
};

//On déclare la fonction stop

function stop()
{
  clearInterval(si);
  chanson.stop();
  decalage = 0;
}

//On déclare la fonction pause

function pause()
{
  clearInterval(si);
  chanson.stop();
}

//Puis la fonction memoire liée à celle du dessus

function memoire()
{
  decalage = chanson.position/1000;
}

//On déclare la fonction lecture

function lecture()
{
  if (charge == false) //Si la chanson n'est pas chargée
  {
    chanson.onLoad = function(ok) //On la charge
        {
      if (ok=true) //Si elle est chargée
         {
        charge = true;
        temps = Math.round(chanson.duration/1000);
        chanson.start(); //On lit la chanson s'il y a plus d'une seconde d'écart entre le chargement et l'état de la lecture
        si = setInterval(memoire, 1000);
      }
    };
    chanson.loadSound(fichier, true); //Dans le cas contraire, on charge la chanson
  }
  else 
  {
    chanson.start(decalage); //Si la chanson est stoppée par l'utilisateur via la fonction pause, la variable decalage est prise en compte
    si = setInterval(memoire, 1000); //De même pour memoire
  }
}
Retour en haut

Finalisation

Votre lecteur est fin prêt !
Vous pouvez bien sûr le personnaliser à votre goût, ou bien commencer à faire une web-radio. ^^

Je vous rappelle quand même le code HTML à insérer pour pouvoir profiter de votre lecteur (si la flemme s'empare de vous et que votre souris refuse de remonter en tête de page) :

Code : HTML
1
2
3
<object type="application/x-shockwave-flash" data="lecteur.swf?fichier=mamusique.mp3" width="LARGEUR" height="LONGUEUR">
  <param name="movie" value="lecteur.swf?fichier=mamusique.mp3" />
</object>


Pourquoi la chanson est-elle chargée par la variable fichier (fichier=) ?


Très bonne question : vous souvenez-vous de ce bout de code lorsqu'on déclare la variable lecture ?

Code : Autre
1
2
3

};
    chanson.loadSound(fichier, true); //Dans le cas contraire, on charge la chanson
  }


Eh bien c'est ceci qui nous permet de définir que la variable fichier contenue dans le code HTML contiendra le .mp3 à jouer !

Et puis, vu que je suis généreux, voici l'archive .rar avec le .fla, le .swf, la page HTML puis une musique libre de droit de Jenny Gillespie en prime. :D

Télécharger l'archive
Retour en haut

Annexes

Faire un lecteur c'est bien, mais l'améliorer c'est mieux !
Oui je sais, ce n'est pas la meilleure des devises mais il suffit d'en comprendre le principe. Maintenant, vous savez faire un lecteur mp3 en flash avec trois fonctionnalités : la lecture, la pause et l'arrêt.
Pourquoi ne pas en découvrir de nouvelles ?

Dans cette partie du tutoriel, je ne vais pas vous dire exactement comment faire, mais je vais vous montrer le chemin à suivre.

L'affichage



Si nous affichions quelque chose sur notre lecteur pour le rendre plus interactif, par exemple un champ de texte dynamique avec des données ou bien des informations ?

Imaginons que nous souhaitons afficher un texte pour dire au visiteur ce qu'il fait ou bien ce qu'il doit faire. Par exemple au début, quand nous déclarons nos variables, vous pouvez ajouter :

Code : Autre
1

txt.affichage = "Cliquez sur le bouton Play pour commencer !";


Et ceci dans chaque fonction, avec un texte différent et le concernant (par exemple pour stop : "Vous avez stoppé la musique") et puis, pourquoi pas ? le nom de la musique :) .

De plus, pourquoi ne pas afficher une barre d'état, c'est-à-dire un movie clip qui indiquera l'avancement de la musique ?

Secret (cliquez pour afficher)
Code : Autre
1

barredetat._width = 0;


Ceci sera à placer au début, bien sûr, lors de la déclaration des variables ; ensuite, via des calculs, vous pourrez indiquer précisément où en est la musique.

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

//Bien sûr, les bouts de code donnés ci-dessous sont à placer dans les fonctions adéquates

barredetat._width = 0;

function stop() 
{
   barredetat._width = 0; //La taille de la barre d'état s'initialise à zéro lorsque la musique est stoppée
}

function memoire() 
{   
   etat = Math.round((chanson.position*100)/chanson.duration); //Ici, on calcule le temps passé pour ensuite le convertir en pixels pour la taille de la barre d'état
   barredetat._width = etat; //On définit la taille de la barre d'état
}
Retour en haut
Nous voilà arrivés à la fin de ce tutoriel !

Peut-être vous demandez-vous pourquoi j'ai rédigé une partie Annexes sur ce que l'on pouvait rajouter en gros dans le lecteur ? Eh bien, question de logique : personnellement je trouve qu'un tutoriel est fait pour apprendre, et non pour copier bêtement le code que l'on vous donne ; il faut, avant tout, si l'on souhaite apprendre n'importe quel langage de programmation, comprendre et analyser ce que l'on fait !

Bref, j'espère que ce tuto vous aura servi, et si vous avez des questions n'hésitez pas, les forums sont là pour ça. ;)

À bientôt.
Retour en haut

Partager

Retour en haut
30 commentaires pour "Un lecteur MP3 en flash"
Note moyenne : 2.95 / 4 (21 votes)
Pseudo Commentaire
Hors ligne mr05j # Posté le 09/07/2010 à 18:17:20
Avatar

 ppff ton site ne marche pas lol!
Hors ligne chx # Posté le 08/02/2011 à 11:43:40
Avatar

Avis : Mitigé

Merci beaucoup pour ces explications.
Cependant je ne comprend pas bien à quel moment on note le titre du morceau de musique.
J'ai téléchargé les archives et j'ai regardé le fichier flash mais je ne vous rien.
Dans la bibliothèque pas de trace du morceau de musique et rien dans le code.
Pouvez vous m'éclairer ?
Merci
Connecté Infoxp # Posté le 24/03/2011 à 22:58:46
Infoxp à votre écoute :D
Avatar

 @chx : Le morceau de musique se charge dirrectement avec le lien d'insertion du fichier flash dans la page HTML sur les balises <object></object>
tu verra un lien dans <param name="movie" value="tonlecteurmp3.swf?lien_de_ton_fichier_musique=tonmp3.mp3"/> bah c'est sur ce lien que le lien de ton mp3 est transmise au lecteur flash ;)

Pour le tuto , sa serait bien aussi d'essayer de faire une playlist avec un fichier XML ;)
Et le mieu serait aussi d'utiliser dirrectement btnLecture.onRelease = function(){ } pour les action au lieu de mettre les actions dirrectement sur le boutton à l'aide de on(release) malgré la date du tuto y'à 2 , 3 ptit truc à mettre à jour par-ci et par là :)
Nom d'un chien , les règles sa existe , aller les lire ... hop ... maintenant :lol:
Image utilisateur
 
Hors ligne kofi # Posté le 02/05/2011 à 03:10:15

Bon voilà, je viens de commencer ton tuto, et je suis déjà perdu, je sais pas quel logiciel tu utilises quand tu parles de bibliothèque commune.

Ca peut paraître c*n je sais, mais bon, ce serait cool, que tu en dise juste un tout petit peu plus pour que je sache quel matériel je dois utiliser.

Merci d'avance. :)

PS: Je sais, je suis un zéro.
Hors ligne misst # Posté le 07/07/2011 à 14:17:40

bonjour,
déjà merci beaucoup pour ce tuto simple et efficace :)
par contre j'ai le même problème que snatch et mae.mld, de temps en temps la lecture du morceaux s'interrompt et reprend au début... le plus bizarre c'est que tout marche très bien quand je teste le lecteur enregistré dans mon ordi, mais quand il est sur mon serveur, bah ça bug...
quelqu'un peut m'aider? merci :)

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.