MP3 reader with ID3 informations (Streaming)

 

The purpose is to create a MP3 reader, a very simple H-scroller. We 'll use Streaming.
ID3v1 & ID3v2 'll be displayed at your convenience. This reader is quite simple, it's not Winamp !
5 songs 'll be played, so no playlist. (It 'd be possible)

It requests some time to get achieved and needs some scripts.

Remarks :
- Sound object can't be tested with Swishmax, so we 'll use ActionScript methods. Thus, to test, select the correct option in Files / Export

- It wasn't very easy with the Script. In fact, script worked as good as possible in FlashPlayer, but quite bad in browser. So I made some changes for that..

- I had a PHP script to get back the kpbs of a song but results were only good in CBR mode (constant bit rate), not in VBR mode (variable bit rate). Winamp was my good friend to get kbps.
I made some reverse-engineering to see how a MP3 file was structured but it changes from file to file.

Over Internet , it doesn't worth a penny. Streaming trouble ?

ID3 informations ain't time to get loaded for another song after the first was played. There is a delay between playing sound and ID3 display. It works pretty good on my Apache webserver and in FlashPlayer as well.

I suppose you know well how to create objects then I won't insist on. Be sure to check out you got the correct Anchor Points and Target as well.

⇒ animation ⇐

you need to be patient a couple of seconds 'cause during Streaming, your Browser Cache is filling up and files are more than 3.5 MB large.

You can download the swf file 

Don't forget to put 5 mp3 songs named : titre1.mp3, ...., titre5.mp3
Here 's a snapshot from FlashPlayer.

Let's see the different stages right now.

Creating Objects

1 - Set up movie size 800x480 (background color #993333). Frame Rate 35.

2 - Draw a rectangle at right in graphic zone as shown by images. Set up a linear color gradient.

   

3 - Now, labels (static text) for informations : Follow images.

Title

   

Band

   

Album

   

Gender

   

Comment

   

Year

   

Track

   

4 - Now, fields to display informations :
- At first,draw a border with a linear color gradient.
- then an internal zone with a linear color gradient.
- group the 2 shapes.

Images are given for the very first group. You ought to change Y for others, and their names as well.

Border

   

Internal

   

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 - Creating dynamic texts to display informations :
Images are given for the very first. Change variables names and Y for others.

   

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

6 - Creating buttons to start songs.
      - At first, a static text is build.
      - then Convert to button.

Images are given for the very first. Change names and Y for others.

   

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

7 - Creating cursor :
First draw a rectangle.

   

Use then tool to get

8 - Creating a Stop button.
      - First draw a circle with a radial color gradient.
      - place a square in the middle.
      - group as button.
      - set up a 'Tooltip' in 'Over'.

Follow images : :

Circle

   

Square

   

Select Menu Modify / Group / Group as button

In Outline, expand the button then select Over

Create text as shown :

   

9 - Creating a dynamic text to display 'bit rate'

   

10 - Creating a radiobutton to allow select ID3v1 or ID3v2

      - First text, then circle.
      - Group as button, then set a 'Tooltip' in 'Over'.

Text

   

Circle

   

Select the 2 shapes. Menu Modify / Group / Group as button

In Outline, expand button, select Over

Create text as shown :

   

Do the same for the other text :

Text

   

Circle

   

Group as button, but set 'tooltip' as same place as the previous one.

11 - Creating a dot :
Draw a circle as shown.

   

12 - Creating slider.
First, begin with a line :

   

then cursor :

   

13 - To finish up, create a dynamic text to display the elapsed time of song :

   

Scripts

In Outline, select Scene_1. Enter the following script :

In Outline, select Button3v2. Enter the following script :

on (press)
{
   v1 = false; // infosID32
   _root.dot._X= 495; // radiobutton center
}

In Outline, select Button3v1. Enter the following script :

on (press)
{    v1 = true; // infosID31
   _root.dot._X= 368; // radiobutton center
}

In Outline, select bstop. Enter the following script :

on (press) { stopSon(); }

In Outline, select Button5. Enter the following script :

on (press)
{
   sonMP3.start(); // start up
   selectSound2play( 5 ); // song 5
   go = true; // cursor
   xkbps = kbps_array[4] add " kbps"; // display kbps
   fleche._Y = 192; // position title5
   fleche._visible = true;
}

In Outline, select Button4. Enter the following script :

on (press)
{
   sonMP3.start(); // start up
   selectSound2play( 4 ); // song 4
   go = true; // cursor
   xkbps = kbps_array[3] add " kbps"; // display kbps
   fleche._Y = 162; // position titre4
   fleche._visible = true;
}

In Outline, select Button3. Enter the following script :

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

In Outline, select Button2. Enter the following script :

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

In Outline, select Button1. Enter the following script :

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

Et voilà, it's all over. You could improve creating a dragable cursor (see startDrag in ActionScript) and a playlist. It's up to you.

 


Si vous aimez le site

 

Select a language if you need :


Page chargée en 0.003 sec.

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

to Google