Welcome To NewFreeTemplates.com Flash Tutorials Area - MP3 Player

This tutorial demonstrates how to load and play MP3 sound with Flash Designer.

Download source project t1061.zip (2 kb)

You can use the source file for your own projects.

To view the code choose "Frame" > "ActionScript". To load your sound file change the path in the ActionScript code. This tutorial is advanced.

1. Launch Flash Designer and set frame size at 400 x 64, set Frame 1 to Stop.
2. Draw the background rectangle on entire frame and fill it with vertical gradient

   

3. Create buttons as 2 circles filled with gray gradients 39x39 pixels and 35x35 pixels

   

   Align both circles and duplicate 3 times

4. Draw button icons with the line tool and fill them with gradients

   

5. Group each of the buttons

   

6. Draw the display: black rectangle with gray 3 px line
7. Add 2 edit fields and name them "playedtime" and "totaltime" (Vairable name field), use white font
8. Draw the progress bar 110x10, no line, green vertical gradient.
9. Convert it to sprite and name it "sndbar", check actionscript target
10. Add "/" between "playedtime" and "totaltime"

    

11. Create volume control, insert down and up triangles (Frame : Insert from Gallery) and make them smaller. Copy speaker icon from the source project file (this step is optional). Add vertical gradient rectangle sized at 19x47 pixels.

    

12. Set the actionscript code for Frame 1

    mySnd = new Sound(); // create sound object
    sndbar._visible = false; // hide the sound bar initially
    
    
    // onLoad executed when the sound completes to load
    mySnd.onLoad = function(){
     // set total time in seconds on the display instead of percentage
     totalseconds = Math.floor(mySnd.duration/1000);
     totaltime=Math.floor(totalseconds/60) + ":" + totalseconds%60;
     // show sound bar for playback
     sndbar._visible = true;
    
    }
    
    // to load your own sound put it on the web
    // and change the path below
    mySnd.loadSound("http://www.flashdesignerzone.com/tutorials/sound.mp3",true);
    
    
    
    volume = 100;
    pause=0;
    
    
    function f1()
    {
     // percent loaded
     buffered=Math.floor((mySnd.getBytesLoaded()/mySnd.getBytesTotal())*100);
    
     // display progress on the display
     if(buffered<100) { totaltime=buffered; totaltime = totaltime+"%"; }
    
     // resize sound playing bar
     sndbar._xscale=(mySnd.position/mySnd.duration)*100;
    
     // display how many seconds played
     playedseconds=Math.floor(mySnd.position/1000);
     playedtime=Math.floor(playedseconds/60) + ":" + playedseconds%60;
    
     // if stopped remove sound bar
     if(action=="stop"){ sndbar._xscale=0; }
    
     if(pause==1){
      pausepos=mySnd.position;
      mySnd.stop();
     }
    
    }
    
    setInterval(f1,100); // trigger f1 every 0.1 second
    

13. Set the code for Play button onClick

    mySnd.start(0,100);
    pause=0;
    action="play";
    

14. Set the code for Stop button onClick

    mySnd.stop();
    action="stop";
    

15. Set the code for Pause button onClick

    if(pause==1){
     pause=0;
      mySnd.start(pausepos/1000);
    } else {
     pause=1;
    }
    

16. Hit F9 for preview