1. Create a new folder in your Web folder name radio


  2. Inside the radio folder create another folder named music


  3. Place your MP3s inside the music folder


  4. Create a playlist
    1. Open a plain text document in BBEdit and paste in the following:
      <?xml version="1.0" encoding="iso-8859-1"?>
      <playlist> 
          <song title="the name of your song" path="music/name_of_your_mp3_file.mp3" /> 
          <song title="the name of your song" path="music/name_of_your_mp3_file.mp3" /> 
          <song title="the name of your song" path="music/name_of_your_mp3_file.mp3" /> 
          <song title="the name of your song" path="music/name_of_your_mp3_file.mp3" /> 
      </playlist>
      



    2. Save as playlist.xml inside the radio folder





  5. Create the interface
    1. Name Layer 1 text


    2. Create a dynamic text field by selecting the text tool. Click and drag on the stage. Name it currentSong. Set the font and size. Make it single line:



    3. Click on the character button



    4. Select Specify Ranges. Click select and then click-shift to select the next lines:


    5. Insert a new layer



    6. Name the layer Buttons


    7. Open Windows>Other Panels>Common Libraries<Buttons:



    8. Open the Playback buttons



    9. Drag four buttons onto the stage. One for play, rewind, go to end and go to beginning



    10. Using the selection tool, drag a box around the buttons and press +K to align the buttons



    11. Name each of the buttons:
      • backBtn
      • stopBtn
      • playBtn
      • nextBtn



    12. Insert a new layer and name it Slider


    13. Using the rectangle tool with a stroke drag a horizontal box.


    14. Set the width to 200


    15. CTRL+click on the fill to convert the fill to a movie clip


    16. Name it pBar



    17. Insert a new layer and name it Slider2


    18. Using the rectangle tool drag a horizontal box without a stroke and CTRL+click on it to convert it to a movie clip


    19. Name this movie clip bar


    20. Using the rectangle tool drag a vertical box and CTRL+click on it to convert it to a movie clip


    21. Name it slider



    22. Insert a new layer


    23. Name the layer ACTIONS





  6. Open the actionscript and add:
    stop();
    _root.slider._x=_root.bar._x+_root.slider._width;
    
    _root.currentSong.autoSize=true;
    
    /* create a variable to hold the total number of tracks. 
    Name it something like numOfTracks Set it to 0. */
    _____=____;
    
    /* create a variable to hold the current track. 
    Name it something like curTrackId Set it to 0. */
    _____=____;
    
     /* Create a variable to hold the total duration of a sound track. 
     Name it something like sndTotDur Set it to 0 */
    ___=__;
    
     /* Create an array to hold Titles of tracks from the external xml playlist.
     Name it something like titles*/
    ___________= new Array();
    
     /* Create an array to hold the path to MP3 tracks from the external xml playlist.
     Name it something like paths*/
    _______________ = new Array();
    
     
    /*Create a variable to hold a new Sound Object
     Name it something like snd*/
     ______=new Sound();
     
     //set the volume of the snd Object to 100
    snd.setVolume(_____);
    
    
     /* Create an XML object to load external XML based playlist into this flash movie */
    xml = new XML();
    
     /* allow white spaces in the xml to avoid errors, 
     if you don't set this property to true then any extra 
     white space in the external file will crash 
     the program by producing errors. */
     xml.ignoreWhite = _____;
     
     /* Tell flash what it has to do when the data from 
     playlist.xml has been retrieved */
     xml.onLoad = function(success){
         
     //check that the xml document loads
         if(success){
         
            /* Create a variable to hold a new XMLnode object
            Name it something like node*/
            _______ = new XMLNode();
    
            /* calculate the total number of childNodes this is 
            the same number as tracks and save the value in your 
            previously created variable 
            Name it  numOfTracks*/
            ____________ = xml.firstChild.childNodes.length;
    
            /* Create a for loop to iterate over the childNodes 
            (numOfTracks).Replace the underline with the variable 
            holding the number of childNodes/tracks
            */
            for (i=0;i< _____ ;i++){
         
                /*set the variable holding the XMLNode object to 
                each childNode of the firstchild of your xml object*/
                ____=____.firstChild.childNodes[i];
         
         
                /* Add the title of the track from xml file to  
                array holding your titles */
                ______.push(node.attributes.title);
    
                /* Add the path of the track from xml file to the 
                array holding the paths*/
                ______.push(node.attributes.path);
    
            } 
       /* call the Function playTracks which you'll write shortly.
      This function is responsible for playing the MP3s in 
      a sequential manner */
      playTracks();
     }else{
         trace("error");
        };
     }
     /*Load the playlist.xml 
     replace the underline with the complete name of your xml file*/
     xml.load("___________");
     
         
    /* The playTracks() function is responsible for playing the tracks 
    in a sequential order. This function is called the
    first time when flash has successfully loaded the data 
    from playlist.xml file and then this function will be 
    called whenever one tracks has been competed and the next 
    track is ready to play. */
    
    function playTracks() {
     
      /* Set the initial width of the progress bar to 0, so 
      that for each track, it will start from 0 */
    	_root.pBar._width =__;
    	
    	/* This event will be triggered when a track will 
    	reach to the end. */
    	snd.onSoundComplete = function() {
    		
    		//reset the width of progress bar to 0 
    		_root.pBar._width =___;
    		
    		/* set the value of sndTotDur variable to 0 */
    		sndTotDur = ___;
    		
    		/* check the value of variable curTrackId. 
    		if the value equals to numOfTracks-1 
    		(means last track has been played successfully, 
    		then reset the value of curTrackId to 0, otherwise 
    		make an increment of 1 
    		to proceed to next track */
    		if (curTrackId != (____________)) {
    			//adding 1 to previous value 
    			curTrackId++;
    		} else {
    			//reset to 0 
    			curTrackId = __;
    		}
    		//recall the playTracks function to play the next 
    		//song in the song's array 
    		playTracks();
    	};
    	
    	/* This function will be triggered when flash player starts 
    	streaming the song file. */
    	snd.onLoad = function(success) {
    	
    		/* set the value of variable sndTotDur equal to the total 
    		time required(in seconds) to play that track completely. */
    		sndTotDur = Math.round(this.duration/1000);
    		
    	};
    	
    	/* load the MP3 file, fetch the path from paths array and choose 
    	the index according to the value of curTrackId variable. 
    	The 2nd argument "true" means that you want the playback mode of the MP3 
    	file to be streaming one so that you wont have to wait for 
    	loading the entire song to play it. */
    	
    	snd.loadSound(paths[curTrackId],______);
    	
    	//Play the loaded song 
    	snd.start();
    	
    	/* set the value of currentSong textfield on main stage equal 
    	to the value of title of that track. */
    	____________.text = titles[curTrackId];
    	
    }
    /////////////////////////////////////////////////
    _root.backBtn.onRelease=function(){
    /* test if the current track is not the first track of the playlist, 
    then move one step back */ 
        if(_root.curTrackId != 0){
            _root.curTrackId--;
            
       }else{
           _root.curTrackId = (numOfTracks-1); }
       }
      /* call the playTracks function to play the track according to 
      the decision made in the above written code. */
      _root.playTracks();
    }
    
    /////////////////////////////////////////////////
    _root.playBtn.onRelease=function(){
        snd.start();
    }
    /////////////////////////////////////////////////
    _root.stopBtn.onRelease=function(){
        snd.stop();
    }
    /////////////////////////////////////////////////
    _root.nextBtn.onRelease=function(){
        /* This code is similar to the code that you have for the backBtn, 
        the only difference is, that code was searching for first track, 
        and this code is looking for last track, the rest of the working 
        is same. */ 
        if(_root.curTrackId != _________{ 
             _root.curTrackId++;
         }else{ 
             _root.curTrackId = ___; 
         }  
    _______________;
     }
     
    ///////////////////////////////////////////////// 
    //create an empty movie clip
    _root.createEmptyMovieClip("empty", _root.getNextHighestDepth());
    
    //Create an anonymous function for the onEnterFrame on the empty clip
    empty.onEnterFrame = function() {
    
    /*Create a variable to hold the current postion of the progress bar
     Name it something like curPos*/
    	______ = Math.round(_root.snd.position/1000);
    	
       /*Create a variable to hold the percent completed
        Name it something like perc*/		
        ____ = Math.round((curPos/sndTotDur)*100);
        
        
    	/* set the width of progress bar movieclip that resides in the 
    	pbar movie clip. 
    	Initially, the width of the bar is set to 0px, and it increases 
    	according to the value of the percentage variable, now, you 
    	may be wondering why you are multiplying the value of perc by 2, actually, 
    	the original width of slider instance is 200px and the maximum 
    	value of any percentage is 100, so  multiplying it by 2 gets the 
    	desired width. */
    	_root.pBar.______ = perc*2;
    	
    	
    	/* check if percentage is greater than or equal to 100% 
    	(this means track is complete), 
    	so reset the width of slider to 0 */
    	if (perc____) {
    		_root.pBar._____=___;
    	}
    };
      /////////////////////////////////////////////////////////////
     
    _root.slider.onPress=function(){
    	this.startDrag(true,bar._x,this._y,bar._x+bar._width,this._y);
    	this.onEnterFrame=function(){
    		ratio=Math.floor((Math.floor(this._x-bar._x)/bar._width)*100);
    		snd.setVolume(ratio);
    	}
    }
    slider.onRelease=slider.onReleaseOutside=stopDrag;
     ////////////////////////////////