> > Tutorials > T1061

Flash MP3 Player.

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


Download source project (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 gradientbackground
  3. Create buttons as 2 circles filled with gray gradients 39×39 pixels and 35×35 pixelsbutton background

    Align both circles and duplicate 3 times

  4. Draw button icons with the line tool and fill them with gradientsbutton symbol
  5. Group each of the buttonsbutton merge
  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 110×10, no line, green vertical gradient.
  9. Convert it to sprite and name it “sndbar”, check actionscript target
  10. Add “/” between “playedtime” and “totaltime”convert
  11. Create volume control, insert down and up triangles (Insert > Shape or Line) and make them smaller. Copy speaker icon from the source project file (this step is optional). Add vertical gradient rectangle sized at 19×47 pixels.volume button
  12. Set the actionscript code for Frame 1
    mySnd = new Sound(); // create sound objectsndbar._visible = false; // hide the sound bar initially// onLoad executed when the sound completes to loadmySnd.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 belowmySnd.loadSound("",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
  14. Set the code for Stop button onClick
  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

get flash