|
| |
| 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) |
  |
Nous avions déjà proposé un lecteur de fichiers MP3 (lire
notre
article du 04/12/03). À l'époque, nous stockions les
noms des fichiers au format XML, afin de mettre facilement à
jour la liste des titres jouables.
L'objectif de cet article est tout autre : élaborer un
lecteur MP3 très léger, avec le minimum vital de fonctions,
conçu pour ne jouer qu'un titre. Notre but sera de construire un clone fonctionnel du DewPlayer,
du PlayTagger
de del.icio.us (sans en atteindre le minimalisme), ou d'autres
lecteurs légers équivalents...
Commençons par lister les fonctionnalités que nous souhaitons
intégrer :
- boutons Jouer, Arrêter, Pause
- des indications visuelles et textuelles du temps
écoulé
- définition du fichier via les variables Flash
...le tout dans un minimum d'espace visuel, et en moins de 4Ko
Le but est donc simplement de pouvoir, pour un fichier mp3 en
ligne, mettre en place un lecteur Flash qui lui est spécifique.
Chaque animation Flash se voit donc assignée un seul
mp3, via les FlashVars précisées dans son code d'affichage.
Celui-ce sera comme suit :
<object type="application/x-shockwave-flash"
data="jdnplayer.swf?fichier=monFichier.mp3" width="200"
height="20">
<param name="movie" value="jdnplayer.swf?fichier=monFichier.mp3"
/>
</object>
On voit
donc que le nom du fichier pourra être exploité au sein de l'animation
Flash par la variable fichier.
Cette exploitation se fera par le biais de l'objet Sound,
qui gère tant la diffusion que le chargement des fichiers mp3.
Cet objet sera contrôlé par trois fonctions, rattachées à trois
boutons : jouer(), pauser(),
arreter().
Plaçons tout d'abord les éléments graphiques dont nous avons
besoin : nos trois boutons (il vaut mieux éviter d'utiliser
les composants proposés par Macromedia, au risque d'y perdre
nombre de kilo-octets), un champ texte dynamique nommé txt,
et un movie-clip de 0 pixel de largeur (et par exemple 10 pixels
de hauteur), barrePlaying, qui
nous servira à indiquer la lecture de manière visuelle. On arrangera
le tout à l'envi.
Ceci fait, plaçons sur nos trois boutons les appels de fonction
idoine : respectivement pour btnJouer,
btnPauser et btnArreter
:
on (release) {
_root.jouer();
}
on (release) {
_root.pauser();
}
on (release) {
_root.arreter();
}
Il nous reste enfin à faire fonctionner le tout ensemble, via
quelques appels ActionScript placés sur la première et seule
image-clef de notre animation. On pourra commence par créer
des fonctions coquilles pour jouer()
et ses deux consœurs, qui ne contiendront qu'un test, pour
la phase de développement (par exemple, trace("jouer");).
Ceci fait, définissons quelques éléments :
barrePlaying._width = 0;
//var fichier = "son3.mp3";
var decalage = 0;
var charge = false;
var duree, si;
txt.text = "Tu veux jouer ?";
chanson = new Sound();
On commence par s'assurer que la largeur de notre barre de lecture
est bien de 0 pixel. Pour les tests internes à Flash, on pourra
utiliser une variable en dur, fichier,
qui nous permettra de nous assurer que le son se joue, sans
devoir le vérifier sous Firefox - en effet, Flash ne prend pas
en compte en interne les FlashVars que l'on lui destine
dans le code HTML. Bien entendu, cette variable en dur sera
retirée/commentée pour la compilation finale...
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
decalage et charge
sont deux variables qui nous permettront de gérer le mode pause.
La première stocke la position de lecture pour la fournir à
jouer() si l'on relance la chanson,
la seconde nous permet de certifier que la chanson a bien été
chargée, pour ne pas la recharger à chaque relance. duree
et si sont deux variables internes
où nous stockerons la durée en secondes du mp3, et l'id
de l'intervalle de calcul du temps passé.
Enfin, on remplit le champ texte pour simplement ne pas le laisser
vide, et on déclare notre objet chanson
à partir de la classe Sound,
véritable cœur de notre petit programme.
|
|
|
|
