TUTORIEL FLASH 
Réalisez un lecteur mp3 en Flash
Etape par étape, apprenez à concevoir et mettre en forme un lecteur léger. Au menu : lecture, arrêt, pause et indications visuelles du temps écoulé. (10/01/2006)
<< 1. Mise en place | 2. Le code essentiel

Cinq fonctions sont à mettre en place : jouer(), pauser() et arreter() bien sûr, mais également majTxt(), qui sera appellée à intervalle régulier pour mettre à jour les informations de lecture affichée, et une fonction attachée à chanson.onSoundComplete, qui lancera arreter() lorsque la chanson se termine. Commençons par ces deux dernières :

chanson.onSoundComplete = function() {
  _root.arreter();
};

function arreter() {
  chanson.stop();
  clearInterval(si);
  decalage = 0;
  barrePlaying._width = 0;
  _root.txt.text = "0/"+duree+" - 0%";
}


La première est donc simplement un renvoi vers arreter() (onSoundComplete est un évènement qui se lance quand la chanson est terminée), afin de ne pas créer de doublon inutile, tandis que cette dernière réinitialise nombre de paramètres : elle arrête la chanson, retire l'intervalle, met à zéro la valeur de décalage ainsi que la largeur de la barre de lecture, et fait refléter l'ensemble par le texte.

pauser() n'est guère plus compliquée :

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


Littéralement, elle stoppe l'intervalle de mesure, ainsi que la chanson. Par contre, elle ne réinitialise par les autres variables : la chanson est censée pouvoir reprendre là où elle s'est arrêtée.

majTxt() est notre centre d'informations :

function majTxt() {
  pc = Math.round((chanson.position*100)/chanson.duration);
  txt.text = Math.round(chanson.position/1000)+"/"+duree;
  txt.text += " - "+pc+"%";
  barrePlaying._width = pc;
  decalage = chanson.position/1000;
}


On y calcule le pourcentage de chanson joué (stocké dans la variable pc), et on inscrit ce pourcentage ainsi que le nombre de secondes écoulées dans le champ texte. Par ailleurs, cette fonction étant lancée périodiquement, on en profite pour y récupérer la valeur de décalage, à partir de la propriété position de chanson.

À noter que decalage doit être exprimé en seconde, tandis que position (tout comme duration) l'est en millisecondes : des calculs s'imposent donc ici.

Enfin, le cœur de notre lecteur, jouer() :

function jouer() {
  if (charge == false) {
    chanson.onLoad = function(ok) {
      txt.text = "Chargement...";
      if (ok=true) {
        charge = true;
        duree = Math.round(chanson.duration/1000);
        txt.text = "0/"+duree+" - 0%";
        chanson.start();
        si = setInterval(majTxt, 1000);
      }
    };
    chanson.loadSound(fichier, true);
  } else {
    chanson.start(decalage);
    si = setInterval(majTxt, 1000);
  }
}


Son comportement est différent selon que le fichier a été chargé ou pas. Dans le premier cas, cela signifie que nous sommes certainement en pause : on appelle donc simplement la méthode start() en lui indiquant le décalage voulu, et on relance l'intervalle, stoppée précédemment.

Dans le second cas, on commence par définir le gestionnaire d'évènement onLoad. Dès que celui-ci renvoie true (donc dès que le fichier est chargé), on passe la variable charge à true, et l'on met en place le reste : calcul de la durée totale, inscription dans le champ texte, lancement de la chanson, lancement de l'intervalle.

Enfin, et seulement après avoir défini onLoad, on appel effectivement la méthode loadSound(), qui chargera notre fichier - le chemin d'accès de ce dernier sera contenu dans la variable fichier.

  Forum

Réagissez dans les forums de JDN Développeurs

Voici donc un lecteur mp3 minimal : notre version finale pèse 1 209 octets. N'oubliez pas que si vous avez par erreur mis en place des composants Macromedia, leur triste mémoire perdurera jusque dans votre SWF. Sauvez votre FLA sous un nom différent, et compilez-le : vous devriez obtenir une taille plus décente. Il vous reste à habiller correctement ce lecteur, sans trop de fioritures...

<< 1. Mise en place | 2. Le code essentiel
 
Xavier Borderie, JDN Développeurs
 
Accueil | Haut de page
 
 





Quand achetez-vous le plus en ligne ?
Du lundi au vendredi
Le samedi
Le dimanche

Tous les sondages