Lecteur MP3 avec infos ID3 (Streaming)

 

On se propose de créer un lecteur MP3 avec une barre de défilement sommaire.
On utilse le 'Streaming' (flux continu).
L'affichage des informations ID3v1 et ID3v2 sera proposé.
Ce lecteur est assez sommaire et ne prétend pas rivaliser avec les pros.
5 morceaux sont proposés donc pas de liste. ( mais ce serait possible )

Cet exemple est assez long à mettre en oeuvre et comporte des scripts.

Remarques :
- L'objet Sound n'est pas testable avec Swishmax, et seules quelques méthodes de cet objet sont incluses, donc vous allez avoir des méthodes ActionScript.
Par conséquent, pour tester, allez dans Fichiers / Export et choisissez l'option qui vous convient.

- Cela n'a pas été facile au niveau du script. En effet, le script fonctionnait parfaitement dans FlashPlayer, mais pas trés bien dans le navigateur.
Il m'a fallu revoir le code pour que çà fonctionne dans les 2.

- J'avais bien un script PHP pour récupérer le kpbs d'un morceau mais il ne donne des résultats probants que dans le mode CBR (constant bit rate) et des valeurs erronées dans le mode VBR (variable bit rate).
J'ai alors récupéré les valeurs par la lecture des propriétés de fichier avec Winamp.
J'ai aussi pu voir avec un éditeur hexadécimal comment était structuré un fichier MP3 : c'est trés variable d'un fichier à l'autre.

Sur Internet, çà ne marche pas bien du tout. Pb de flux ?

Les infos ID3 n'ont plus le temps d'être rechargées à partir du second morceau. Elles apparaissent tardivement.
Il vaut mieux attendre quelques secondes avant de lancer un morceau pour que le flux ait le temps de s'amorcer.
Cà marche bien sur mon serveur Apache mais aussi dans FlashPlayer.

Je suppose connues les fonctions de création aussi je n'insisterai pas.
Assurez-vous de bien vérifier que vous indiquez les bons 'Anchor Points' (pt d'ancrage) dans les images ainsi que les 'Target' (cochés ou non).

⇒ animation ⇐

Il faudra être patient au démarrage car, en Streaming, le Cache se remplit à la volée et les fichiers font plus de 3,5Mo!

Vous pouvez récupérer le swf 

Testez le mais n'oubliez pas de mettre dans le même répertoire 5 mp3 nommés : titre1.mp3, ...., titre5.mp3
Voici ce que çà donne dans FlashPlayer.

Les différentes étapes vont être décrites maintenant.

Création des Objets

1 - Définissez les dimensions générales 800x480 (couleur du fond #993333).
Prenez un Frame Rate égal à 35.

2 - Créez un rectangle dans la partie droite comme l'indiquent les images.
Mettez un gradient linéaire de couleurs.

   

3 - Mise en place des étiquettes (textes statiques) pour les informations :
Suivez bien les images.

Titre

   

Interprète

   

Album

   

Genre

   

Comment

   

Année

   

Piste

   

4 - Mise en place des champs d'affichage :
- Dans un premier temps, on crée un cadre avec un gradient linéaire de couleurs.
- puis une zone interne avec un gradient linéaire de couleurs.
- on groupe les 2.

Voici les images pour le premier groupe. Il suffira de modifier les Y pour les autres, ainsi que les noms de groupe.

Cadre

   

Intérieur

   

Group 1 :
      Cadre Y = 110 Intérieur Y = 113
Group 2 :
      Cadre Y = 170 Intérieur Y = 173
Group 3 :
      Cadre Y = 230 Intérieur Y = 233
Group 4 :
      Cadre Y = 290 Intérieur Y = 293
Group 5 :
      Cadre Y = 350 Intérieur Y = 353
Group 6 :
      Cadre Y = 410 Intérieur Y = 413

5 - Création des textes dynamiques associés aux champs d'affichage :
Voici les images pour le premier. Il suffira de modifier les noms des variables et les Y pour les autres.

   

texte : txt1 variable : xtxt1 Y = 111
texte : txt2 variable : xtxt2 Y = 171
texte : txt3 variable : xtxt3 Y = 231
texte : txt4 variable : xtxt4 Y = 291
texte : txt5 variable : xtxt5 Y = 351
texte : txt6 variable : xtxt6 Y = 411

6 - Création des boutons de lancement des morceaux de musique.
      - Dans un premier temps, on crée le texte.
      - ensuite, on convertit en bouton.

Voici les images pour le premier. Il suffira de modifier les noms et les Y pour les autres.

   

Titre 2 Y = 90
Titre 3 Y = 120
Titre 4 Y = 150
Titre 5 Y = 180

7 - Création du curseur indicateur :
Créez d'abord un rectangle.

   

Utilisez ensuite l'outil pour obtenir

8 - Création du bouton d'Arrêt.
      - on crée d'abord un cercle avec un gradient radial de couleurs.
      - on place un carré au centre.
      - on groupe en bouton.
      - on met un 'Tooltip' dans 'Over'.

Suivez les images :

Cercle

   

Carré

   

Sélectionnez les 2 formes. Menu Modify / Group / Group as button

Dans Outline, développez le bouton et sélectionnez la branche Over

Créez le texte comme indiqué :

   

9 - Création du texte dynamique d'affichage du 'bit rate'

   

10 - Création des boutons de choix d'affichage des infos ID3v1 ou ID3v2

      - on crée d'abord le texte, puis le cercle.
      - on groupe en bouton, puis on met un 'Tooltip' dans 'Over'.

Texte

   

Cercle

   

Sélectionnez les 2 formes. Menu Modify / Group / Group as button

Dans Outline, développez le bouton et sélectionnez la branche Over

Créez le texte comme indiqué :

   

Faites la même chose pour le second texte :

Texte

   

Cercle

   

Groupez en bouton, mais mettez le 'tooltip' au même endroit que le précédent.

11 - Création de la puce de sélection :
Créez un cercle comme indiqué.

   

12 - Création de la barre de défilement.
On commence par la ligne :

   

puis le curseur :

   

13 - Pour finir, création du texte dynamique d'affichage du temps écoulé :

   

Scripts

Dans Outline, sélectionnez Scene_1. Entrez le script suivant :

Dans Outline, sélectionnez Button3v2. Entrez ce script

on (press)
{
   v1 = false; // on veut infosID32
   _root.dot._X= 495; // centre du bouton radio
}

Dans Outline, sélectionnez Button3v1. Entrez ce script

on (press)
{    v1 = true; // on veut infosID31
   _root.dot._X= 368; // centre du bouton radio
}

Dans Outline, sélectionnez bstop. Entrez ce script

on (press) { stopSon(); }

Dans Outline, sélectionnez Button5. Entrez ce script

on (press)
{
   sonMP3.start(); // remet la position au début
   selectSound2play( 5 ); // morceau 5
   go = true; // curseur
   xkbps = kbps_array[4] add " kbps"; // affiche kbps
   fleche._Y = 192; // position titre5
   fleche._visible = true;
}

Dans Outline, sélectionnez Button4. Entrez ce script

on (press)
{
   sonMP3.start();
   selectSound2play( 4 );
   go = true;
   xkbps = kbps_array[3] add " kbps";
   fleche._Y = 162;
   fleche._visible = true;
}

Dans Outline, sélectionnez Button3. Entrez ce script

on (press)
{
   sonMP3.start();
   selectSound2play( 3 );
   go = true;
   xkbps = kbps_array[2] add " kbps";
   fleche._Y = 132;
   fleche._visible = true;
}

Dans Outline, sélectionnez Button2. Entrez ce script

on (press)
{
   sonMP3.start();
   selectSound2play( 2 );
   go = true;
   xkbps = kbps_array[1] add " kbps";
   fleche._Y = 102;
   fleche._visible = true;
}

Dans Outline, sélectionnez Button1. Entrez ce script

on (press)
{
   sonMP3.start();
   selectSound2play( 1 );
   go = true;
   xkbps = kbps_array[0] add " kbps";
   fleche._Y = 72;
   fleche._visible = true;
}

Voilà, c'est terminé. On pourrait ensuite envisager d'améliorer ce lecteur en gérant une liste par exemple ou en rendant le curseur déplaçable par la souris (méthode startDrag d'ActionScript).

 


Si vous aimez le site

 

Select a language if you need :


Page chargée en 0.018 sec.

Dernière Modification : Mer 25 Janvier 2017 8:56
Copyright © 1999-2017 Jean-Paul Molina Tous droits réservés.

vers Google