.net - Décembre 2005
Au fil des versions du Flash Player la classe Sound() s'améliore et se peaufine. Lors de la sortie de la version 5 du logiciel, la classe est apparue avec ce grand soulagement qui était de pouvoir enfin lire et piloter des fichiers mp3 depuis l'Action Script. Avec la version 6, ou encore MX, il est arrivé un complément de taille qui permettait alors de charger à la volée ces mêmes fichiers mp3, sans avoir à les importer au préalable. Cette version améliorait également les fonctionnalités de lecture et de manipulation de fichier audio déjà existantes. Vient ensuite l'époque de MX 2004 qui a alors permis l'exploration de l'ensemble des méta données contenues dans le fichier audio, ouvrant ainsi plus grandes les portes de l'univers du mp3. Enfin la dernière version, la 8, augmente de manière transparente la capacité de traitement en simultané des canaux audio en passant de 8 à 32. Aux vues de tout cela, et en s'appuyant sur les possibilités XML de Flash, il est possible d'envisager la confection d'un véritable lecteur mp3 perfectionné et riche en options, pouvant être aussi performant que bien d'autres solutions alternatives. De là à l'embarquer ensuite au sein d'une page web, il n'y a qu'un pas que les services de publication de Flash prendront aisément en charge, à quand un lecteur Flash Lite pour embarquer , nos musiques en téléphonie mobile...
Extraits musicaux
Les extraits musicaux utilisés sont la propriété de One C et sont gracieusement mis à disposition pour illustrer cette version en ligne de l'article. En aucun cas les morceaux sont distribués et ils ne peuvent être utilisés à d'autres fins. Je vous invite à parcourir les sites de One C et One C. Klang pour découvrir d'autres facettes du compositeur. L'album présenté en ligne est X Paradise Disk 2.
Apercu et t élchargement des fichiers nécessaires
Flash Player et mp3…
Sous le capot, le player Flash cache bien des fonctionnalités intéressantes. Afin de simplifier la réalisation du lecteur, il est préférable de les MP_Finalexpérimenter de manières distinctes.
Les métas donnés du mp3.
Tout fichier digital audio possède, en complément des pistes son, des informations textuelles ou graphiques. Les plus connues sont le titre, le genre de musique, le nom du groupe… il en existe quelques dizaines. Elles sont limitées en tailles et ne permettent pas, pour la plupart, des descriptions étendues. Toutes ces informations étant souvent stockées à la fin du morceaux il est nécessaire que celui-ci soit intégralement chargé pour les rendre accessibles et encore faut il avoir pris le temps de les renseigner. Vous trouverez une mine d'informations sur le site http://www.id3.org. Si elles sont présentes au sein du fichier mp3, ces métas donnés peuvent être lus depuis le Flash Player. Flash est capable d'interpréter les deux types de versions, v1 et v2. Un bon outil pour baliser vos fichiers mp3, reste Tag & Rename ( http://www.softpointer.com/tr.htm). Ouvrez le fichier "lecteurMD_01.fla" fourni sur le CD et lancez le, la fenêtre de sortie liste l'ensemble des métas donnés lus par le player. Le code est très simple, il est basé sur une boucle explorant l'ensemble des propriétés id3 de l'objet.
Téléchargement progressif ou flux continu ?
Il existe deux modes de lecture pour les fichiers audio externes. Le téléchargement progressif qui fonctionne en corrélation d'un serveur web (protocole http://) au travers de la classe Sound(), et le flux continu qui passe par Flash Communication Server (protocole rtmp://) qui utilise la classe NetStream().
( http://www.macromedia.com/fr/software/flashcom/).
Les avantages de la seconde solution sont qu'il est possible d'avancer la lecture du fichier vers une partie qui n'est pas encore chargée, ou encore qu'aucune trace du fichier ne réside sur la machine hôte. L'inconvénient est que la licence de FCS est nécessaire.
Réalisation de l'interface.
Afin de réaliser des interfaces utilisées dans Flash on entend souvent parler d'outils comme Illustrator ou bien Freehand. Il existe pourtant une solution alternative qui mérite attention, Fireworks. Cet outil bien que continuellement comparé à Photoshop n'a rien à voir avec ce dernier et en reste au contraire un excellent complément. Fireworks lit et exporte le format PSD. Traitant aussi bien le format vectoriel que le bitmap, il permet d'intégrer rapidement l'ensemble des objets et calques d'un environnement de travail à l'autre, par simple glissé / déposé, copié / collé ou encore par importation du fichier.
XML et Flash font bon ménage.
Les avantages du XML ne sont plus à démontrer et au fil des versions le Player Flash a su améliorer les performances et corriger les failles de l'objet. Notre lecteur MP3 peut tirer partie de cette technologie pour charger la liste des morceaux disponibles. On pourrait alors envisager un script PHP qui récupérerait les informations dans une base de données et génèrerait le fichier XML nécessaire. La liste des informations à transmettre et le formatage en nœud ou en attribut dépendent du style de chaque développeur. Attention à ne pas faire double emploi avec les informations déjà contenues dans les métas données du fichier mp3.
Mise en place des fonctionnalités.
Après avoir chargés la liste des morceaux disponibles depuis un fichier XML, le lecteur présentera le titre du premier morceau disponible. Les boutons avance et retour permettront de naviguer dans cette liste en affichant le titre et le numéro d'ordre du morceau.
A la fin de chaque morceau, le suivant pourra s'enchaîner de manière chronologique ou aléatoire. Le compteur affichera soit le temps écoulé, soit le temps restant. Deux barres de progression permettront de suivre d'une part le chargement du fichier et d'autre part le temps de lecture du morceau. Et enfin deux réglettes ajustables permettront de régler la balance et le volume sonore. Pour assurer la portabilité en Flash MX, les métas données ne seront pas exploitées.
Réalisation du lecteur mp3.
Pour chacune des étapes, des fichiers distincts sont fournis comme base de travail. Ils contiennent des commentaires qui permettent de compléter les informations présentes sous la vignette. Le fichier MP_Final.fla, contient l'ensemble des commentaires et les détails de fonctionnement de l'application. Pour des raisons de droits d'auteurs, les fichiers mp3 ne sont pas fournis, donc avant de tester veuillez vous en procurer et remplissez le fichier XML en fonction.
Mise en place des divers éléments graphiques.
< 1 >
L'interface est directement réalisée dans Fireworks, mêlant effets bitmap, objets vectoriels, textes et boutons. Une fois importée au format natif (.png), les éléments seront autonomes et pourront être directement modifiés ou convertis en clip au fur et à mesure de leur utilisation.
< 2 >
Au choix, importez Interface.png, utilisez vos propres visuels, ou ouvrez le fichier MP_01.fla fourni. Seul, l'élément 'Led' est construit de manière imbriquée, un clip de 2 images avec un stop(); sur la 1ère. Pour les autres, identifiez les comme indiqué dans l'étape suivante.
< 3 >
Nommez les boutons de commande bt_rew, bt_fwd, bt_play, bt_stop, bt_ordre et le voyant led. Utilisez bt_vol et bt_pan pour les boutons de curseur et barre_pan et barre_vol pour les glissières converties en clip. Enfin, placez les textes en propriétés dynamique et nommez les titre, duree et nb.
Maintenant tout est question de code et méthodologie.
< 4 >
Afin de garder l'animation claire et organisée, il est bien d'utiliser un calque par catégorie de script. On peut d'ores et déjà les mettre en place et les remplir au fil des prochaines étapes. Nos instances étant nommées, tous les scripts vont pouvoir être ainsi centralisés.
< 5 >
Le fichier XML contient une balise principale <serie>, contenant autant de balise <morceaux> que nécessaire. Les deux informations sur le titre du morceau et le fichier correspondant sont passés par des attributs du même nom. Remplissez les avec vos propres données.
< 6 >
Coté arborescence, créez un dossier 'datas' au même niveau que le fichier '.fla'. Qu'il s'agisse d'une publication sur CD ou sur un site web, ce dossier contient l'ensemble des fichiers externes XML et MP3, copiez y donc vos fichiers. Vous pourrez dès la prochaine étape modifier cette arborescence.
< 7 >
Ouvrez MP_02-1.fla. Le premier fragment de script initialise l'objet 'datas' qui va contenir un ensemble de propriétés relatives à l'animation. Le détail de chacune de ces propriétés est décrit en commentaires dans le code. Certaines ne seront utile qu'ultérieurement au cours des étapes.
< 8 >
Ouvrez MP_02-2.fla, cette partie du code charge le fichier XML et le parse pour en extraire les données qu'il stocke dans datas.morceaux. L'instruction usecodepage permet de traiter des documents non UTF-8, et ignoreWhite évite les espaces blancs (TAB, SPACE, RETURN…) contenus dans le documents XML.
< 9 >
Ouvrez MP_03.fla. Deux gestionnaires sont appelés par l'étape précédente. initSon() qui prend en charge le contrôle des fichiers audio et chargeMorceau () qui donne les informations sur le morceau en cours. La fonction formate() permet d'afficher un chiffre sur 2 digits ("3" à "03").
L'ensemble du lecteur est en place, il faut maintenant coder les commandes afin de lancer la lecture d'un morceau.
Lors de l'appel de la fonction loadSound() le Flash Player ponctionne sur le serveur une portion du fichier audio équivalente à la valeur de la mémoire tampon (_soundbuftime). Dès qu'une quantité suffisante est chargée, la lecture commence par contre des propriétés comme duration ou position ne seront accessibles qu'à la fin du chargement du fichier audio.
Ajoutons une barre de commandes classique.
< 1 >
Ouvrez MP_04.fla. Un gestionnaire onPress() est ajouté à chaque bouton. Bt_play invoque joueSon() et Bt_stop rappelle initSon(). Par contre bt_fwd et bt_rew eux s'assurent, en incrémentant ou décrémentant le compteur de morceaux, de ne pas déborder de la liste avant d'invoquer chargeMorceau().
< 2 >
Ouvrez MP_05-1.fla. Le gestionnaire joueSon() identifie le morceau puis le charge. En même temps il active un interval qui affiche la progression du chargement. Une fois le fichier chargé, cet interval est libéré, et un autre est activé pour suivre la progression de lecture.
< 3 >
Ouvrez MP_05-2.fla. Le gestionnaire joueSon se compléte d'une réinitialisation de l'objet Sound(), et réaffecte la valeur de la balance car la fonction loadSound() par défaut la replace la à 0. La propriété isPlaying n'existant pas, on en crée une artificielle, datas.joue.
< 4 >
Ouvrez MP_06.fla. Les gestionnaires setDuree() et setLoad() pilotent les barres de progression. Une simple règle de trois fait affaire en tenant compte de la valeur totale et de la valeur actuelle (va*100/vt). Lors de la progression de lecture, le compteur de temps est également pris en compte.
< 5 >
Ouvrez MP_07.fla. Afin de pouvoir afficher soit le temps passé soit le temps restant, une propriété booléenne datas.modeDuree est utilisée. Un bouton invisible qui permute cette valeur est placé sur le compteur. True active le temps passé, false le temps restant.
< 6 >
Ouvrez MP_08.fla. Chacun des boutons possède un gestionnaire onPress() et onRelease() qui pilotent un interval. Une fois encore, une règle de trois, affecte les propriétés pan et volume durant cet interval. Le déplacement des boutons est limité aux dimensions de la réglette.
< 7 >
Ouvrez MP_09.fla. Aussitôt qu'un morceau est terminé, le gestionnaire OnSoundComplete interpelle la fonction avance(). Une propriété booléenne datas.ordre définie si les morceaux s'incrémentent de manière chronologique ou aléatoire. bt_ordre pilote cette valeur et active le clip led.
< 8 >
Ouvrez MP_10.fla. Enfin pour terminer, une fonction qui s'exécute au début… J. La fonction d'initialisation d'affichage, appelée par initSound(). Elle prend en charge les positionnements ou valeurs par défaut des divers éléments, curseurs, compteurs, barres de progression, etc...
< 9 >
Ouvrez MP_Final.fla. Cette version de lecteur MP3 est terminée, libre à vous de continuer d'améliorer ses fonctionnalités. Vous pouvez le publier en tant que lecteur autonome Mac ou PC, ou encore sur une page web sous une version 6 (MX) minimum. Bonne musique…
