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.