Make MP3 Player with Flash ~ design

This time I will make a separate program for playing MP3, by adding some features commonly available in the form of MP3 player add files, view playlists, and the ability to choose the playlist. But still with the limitation that the MP3 files should be in the same folder with SWF file.

See The Tutorial Videos

Features add files that can select multiple files simultaneously can we make use FileReferenceList class, while the feature created a playlist using the List component. To start, let's follow the steps below:

1. First, create a new Flash file with the features of ActionScript 2.0. How, click the menu File> New.… after the options window appears, select Flash File (ActionScript 2.0).

2. Click Modify> Document. In the Dimensions column, change the value of Width and Height to 300 px for stage width and 270 px for height measurement stage.

3. Do the import button in a way, click the Components tab, User Interface, and select Button, click and drag the button to the stage. Take three pieces of buttons, which are used for the Browse for File, Previous, and Next.

4. Click the first button on the Properties tab, give the instance name left_btn.

Then click the Component Inspector panel. On the Parameters tab, select the label and change its name to Previous.

Do it for the next button in the same way. On the second button, give the instance name browse_btn and on the third button, give the instance name right_btn.

5. Using the Text Tool, create a Dynamic Text with the instance name word_txt that position under three previous Movieclip. Later, this text will display the artist name and song title (taken from the ID3 tags of MP3 which is running, while also displays the current song when compared to the total time the entire song.

6. To view playlists, we will use the List component, which is one of the predefined components in Flash that can be found in the User Interface Components panel. If the Components panel is not visible, we can open it by clicking the menu Window > Components.

7. Drag List component from Components panel to the center stage, positioned at the bottom of the third button that we have made previously.

8. Give the component an instance name with the name cmp_playlist.

9. Create a new layer we will use as a special place to save ActionScript. Writing the script aimed at a separate layer to make it more neatly, and not mixed with other components, making them easier organized. Create a new layer can be done by click the menu Insert > Timeline > Layer found on the main menu.

Or they can be illustrated with a paper click on the icon located at the lower left corner of the Timeline panel.

10. Right click on the first frame in a new layer that was created earlier, select the Actions menu.

11. After the ActionScript panel appears, give this script:

import flash.net.FileReferenceList;

var playlist:Array = new Array();
var music:Sound = new Sound();
var number:Number = new Number(0);
var jmlMax:Number = new Number(4);
var fileRefList:FileReferenceList = new FileReferenceList();
var listenerFileRefList:Object = new Object();
var listHandler:Object = new Object();

this.createTextField("status_txt", this.getNextHighestDepth(), 0,0,100,22);

right_btn.onPress = right;
left_btn.onPress = left;
browse_btn.onPress = browseFile;
browse_btn.text.text = "load";
left_btn.text.text = "prev";
right_btn.text.text = "next";
fileRefList.addListener(listenerFileRefList);
cmp_playlist.addEventListener("change", listHandler);
cmp_playlist.setStyle("fontFamily", "corbel");
cmp_playlist.setStyle("fontSize", "12");

function doubleClick(arg1) {
trace(arg1);
}

listHandler.change = function(evt:Object)
{
    if(number != evt.target.selectedItem.data)
    {
        number = evt.target.selectedItem.data;
        loadMusic();
    }
}

music.onSoundComplete = function()
{
right();
}

music.onLoad = function(success:Boolean)
{
    if (success)
    {
        music.start();
        status_txt.text = "file Found";
        trace("playlist: ");
        for(var i = 0; i < playlist.length; i++)
        {
            trace(i+": "+playlist[i]);
        }
    }
    else
    {
        status_txt.text = number + " file not Found";
    }
}

listenerFileRefList.onSelect = function(file:FileReferenceList):Void
{
    for(var i=0; i < file.fileList.length; i++)
    {
        var fileChoose = file.fileList[i].name;
        playlist.push(fileChoose);
        cmp_playlist.addItem({label:fileChoose, data:i});
    }
    loadMusic();
}

function browseFile()
{
fileRefList.browse();
}

function loadMusic()
{
music.loadSound(playlist[number], true);
}

function right()
{
    number +=1;
    if(number >= playlist.length)
    {
        number = 0;
    }
    loadMusic();
}

function left()
{
    number -=1;
    if(number <= 0)
    {
        number = playlist.length - 1;
    }
    loadMusic();
}

this.onEnterFrame=function()
{
    var position:String = music.position.toString();
    var duration:String = music.duration.toString();
    var artist:String = music.id3.artist.toString();
    var title:String = music.id3.songname.toString();
    var minutePlaying:String = Math.floor(position/60000) + ":" + Math.round((position/1000)%60);
    var minuteTotal:String = Math.floor(duration/60000) + ":" + Math.round((duration/1000)%60);
    if(position == undefined)
    {
        word_txt.text = "load MP3 file first";
    }
    else
    {
        word_txt.text = artist + " - " + title + "\n" + minutePlaying + " / " + minuteTotal;
    }
}

12. Save the FLA file first from the Flash is in a particular folder containing MP3 files (e.g a folder in My Music), by clicking File menu > Save As ...

13. Perform a Test Movie to see a preview of the movie Flash we have made this. Click Control > Test Movie, or by pressing Ctrl + Enter on the keyboard.

14. To create this executable file from SWF (that can be run on another computer, even if Flash is not installed on other computers), we can set it with the way Windows Projector checklist on the menu option File > Publish Settings.