Ce cours est visible gratuitement en ligne.

J'ai tout compris !
Un lecteur MP3 en flash

Un lecteur MP3 en flash

Mis à jour le mercredi 30 octobre 2013

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 !

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 :

<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. ;)

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: ).

L'ActionScript

Maintenant, nous allons placer l'ActionScript.

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 :

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. ^^

Ouvrez le panneau de programmation ActionScript sur le calque actions.

3 - Déclaration des principales variables

//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

//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.

//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.

//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

//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
  }
}

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) :

<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 ?

};
    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

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 :

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 ?

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.

//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
}

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.

déroulement d'un cours

  • 1

    Dès aujourd'hui, vous avez accès au contenu pédagogique et aux exercices du cours.

  • 2

    Vous progressez dans le cours semaine par semaine. Une partie du cours correspond à une semaine de travail de votre part.

  • !

    Les exercices doivent être réalisés en une semaine. La date limite vous sera annoncée au démarrage de chaque nouvelle partie. Les exercices sont indispensables pour obtenir votre certification.

  • 3

    À l'issue du cours, vous recevrez vos résultats par e-mail. Votre certificat de réussite vous sera également transmis si vous êtes membre Premium et que vous avez au moins 70% de bonnes réponses.

L'auteur

Découvrez aussi ce cours en...

Exemple de certificat de réussite
Exemple de certificat de réussite