Making an MP3/FLV Player with Flash MX 2004 and JavaScript

Click on the first frame of misc layer and if the action panel is not opened, press F9 and type following code in first frame of misc layer:

//declare a variable called fName which will hold the name of the file that you //will select through our HTML Form
var fName;

Now select the first frame of functions layer and add following codes to it:

listener = new Object ();
listener.change = function(evtObj){
    var file = evtObj.target.selectedItem.data;
    _root.flPlayer.contentPath = file;
};
myList.addEventListener("change", listener);

Actually we are adding these codes to our list component because when we select a MP3/FLV File, the file name will be added to this list component. When someone clicks any item (MP3/FLV Song) of that list, this function will be triggered. Now I'm going to explain the codes briefly, because there is very little to explain.

Line 1: listener = new Object ();

This line declares a new object called listener.

Line 2: listener.change = function (evtObj) { }

This line attaches an event “change” to our object, which listens to all the events which are related to our list component. Since we are attaching the “change” event of list component, when something changes in our List Component or some one clicks any of its items, it will launch the function which is stated as function(evtObj). Here we have used a term called “evtObj,” which is not a reserved word but just a variable that tells the Flash player that the event was triggered from our List component (since the object is attached to list component). For further help about event objects, check online help of macromedia at http://www.macromedia.com.

Line 3: var file = evtObj.target.selectedItem.data;

Line 3 actually declares a variable “file” which will hold the file name of a selected item of the list component and meantime assigns the path of the selected MP3/FLV from our myList (List component) to the “file” variable.

Line 4: _root.flPlayer.contentPath = file;

Line 4 tells the flPlayer(Media Playback Component) to load its content from the “file” variable by using its “contentPath” property, which takes in a string as the path of the content to be played.

Line 6: myList.addEventListener ("change", listener);

This line is adding the event listener to our list component. Click on “checker” movie clip on our stage and open the action panel by pressing F9 and type the following codes in it.

  onClipEvent(enterFrame) {
  if (_root.fName ne "" && _root.fName ne undefined){
    _root.myList.addItem({label:_root.fName,data:_root.fName});
    _root.fName = "";
    }
  }

Line 1: onClipEvent(enterFrame){

This line indicates to the Flash player that whenever this frame is played (of “checker” clip), execute this code.

Line 2-3: if (_root.fName ne "" && _root.fName ne undefined){ 

This line checks if the variable “fName” that we declared earlier on the “misc” layer of main timeline have some value or not. It further verifies that the value of “fName” should not be equal to “undefined,” which is the default for all undeclared variables in flash. It is used just to verify whether the value in fName variable is valid or not.

Line 4: _root.myList.addItem({label:_root.fName,data:_root.fName});

This line adds the value of fName (which will be the path to selected MP3/FLV file)  to our List component ( i.e. myList).

Line 5:  _root.fName = "";

This line resets the value of fName to empty so that it can store other values. Line 6 and line 7 are just the closing brackets of our "if" statement and main code block respectively.

Click on the button instance which is present on our main stage (whose label was set to “Add MP3/FLV…”), launch the Action panel and add these codes:

  on (click){
  getURL("javascript:MM_openBrWindow
('url.html','popup','status=yes,width=300,height=50')",
"_self");
  }

Line 1: on(click){

This defines the Flash player. If some one clicks this button then the following code is triggered.

Line 2: this line is simply opening a Web page using JavaScript. This will be the same page that will allow us to browse our directories and select the desired song.

NOTE: If you have installed any popup blockers (like yahoo, msn or google toolbar) or something of that sort, disable those first or else this code won't work.

Now save the movie and test it. If you receive an error during compilation (exporting of movie), recheck to make sure that you have followed the steps accurately.

NOTE: The Web page will not open at this time because we have not yet created that. In step three of this tutorial, we will create our HTML documents so move on to next step.