CMS
Actionscript 3 based Mini Audio player / MP3 player in Flash


This tutorial is dedicated to Juan, who wrote to me saying “It may be too much asking but have you thought in loading a songlist from an XML”, which gives me this bright idea to write a tutorial on ‘Mini Audio / MP3 player in flash’.

The credit surely goes to Actionscript 3 for the all their new features including ‘pause’.

We will be covering a lot of topics whilst creating mp3 player, topics include,
  • List Component
  • Loading external XML data to list component
  • Sound, Sound Channel and Sound Transform class
  • Add Event Listener method
  • FLV Components, such as Play / Pause / Stop / Mute / Back button / Forward button / Slider.
  • Volume Control
For better understanding of ‘list component’ and ‘sound classes’, shall write about the same in different sections.

Let’s begin with ‘List Component’, which is also the first step in creating Flash MP3 player.

List Component –

  • Drag a List component from the Components panel to the Stage.
  • In the Property inspector, do the following:
  • Enter the instance name tracklist.
  • Assign a value of 250 to the W (width).
  • Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code.
    import fl.controls.List;
    var xmlLoader:URLLoader = new URLLoader();
    var xmlData:XML = new XML();
    xmlLoader.load(new URLRequest("songs.xml")); xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
    function LoadXML(e:Event):void
    {
    xmlData = new XML(e.target.data);
    Parsemusic(xmlData);
    }
    function Parsemusic(musicInput:XML):void
    {
    var musicname:XMLList =musicInput.tracks.mname; var musicurl:XMLList = musicInput.tracks.murl;
    for (var i:int = 0; i < musicname.length(); i++)
    {
    var nameElement:XML = musicname[i];
    var urlElement:XML = musicurl[i];
    tracklist.addItem({label:musicname[i], data:musicurl[i]});
    }
    }

  • Click here to download songs.xml
  • By now, we are through with creating and populating ‘List Component’. You can also go through and play around with different list component properties to change its look and feel.
  • place ‘play’, ‘pause’ (pause goes below the play button), ‘stop’, ‘mute’, ‘back’ and ‘forward’ button and ‘slider’ from the FLV component list.
  • Provide instance names ‘play_btn’, ‘pause_btn’, ‘stop_btn’, ‘mute_btn’, ‘back_btn’, ‘fwd_btn’ and ‘timeSlider’ respectively.
  • I created a custom made ‘volume control’ movie clip symbol.
  • Steps to create the same is provided below.
  • Press ‘Ctrl+F8’ and create a new movie clip symbol, call it ‘volume_slider_mc’
  • Draw a vector line of width 100px.
  • Convert the same to graphic symbol and provide and instance name ‘line_gr’.
  • Create a small vector square of dimension 10 x 10.
  • Convert it to a movie clip symbol and provide an instance name ‘slider_mc’ and place it at the end of line_gr, where in its center collides line end. Approximately, ‘slider_mc’ x and y position should be 95 and -5 respectively.

Next step is to get the player up and running. To accomplish the above, we will have to provide an EventListerner to our List Componenet ‘tracklist’ to check for song selection, grab the song url / data from tracklist, check if the song is loaded, or if there is an error while loading and to play. There is another very important thing which I HAVE TO mention. As you all are aware, to play a song, we will have to create a ‘Sound Object’ and allot play method to Sound Object for playing select music, but the problem here is, we cannot just finish with this, because there is a ‘Memory leak’ problem with AS3. To overcome this problem, we will have to create a ‘player object’ and then allot sound object to the same.

Functionalities for buttons and sliders are also included

var sc:SoundChannel=new SoundChannel();
var flagsc:Number=0;
var songurl:URLRequest = new URLRequest();
var playerObject:Object = new Object();
var pausePoint:Number = 0.00;
var isPlaying:Boolean;
var muted:Boolean = false;
var soundvolume:Number = 1;
var forwardDuration:Number = 5000;
var fileTimeInSec:Number;

tracklist.addEventListener(Event.CHANGE, tracklistchange);

function tracklistchange(event:Event)
{
if (flagsc==1)
{
sc.stop();
}
else if (flagsc==0)
{
flagsc=1;
}
playSound(event.target.selectedItem.data);
}

function playSound(url)
{
songurl.url = url;
if (playerObject.sound!=null)
{
delete playerObject.sound;
}
playerObject.sound = new Sound();
soundevents();
playerObject.sound.load(songurl);
}

//sound events for 'complete', 'error' and 'progress'

function soundevents():void
{
playerObject.sound.addEventListener(Event.COMPLETE, musicloaded); playerObject.sound.addEventListener(IOErrorEvent.IO_ERROR, onIOError); playerObject.sound.addEventListener(ProgressEvent.PROGRESS,funcOnLoadProgress);
}

function musicloaded(event:Event)
{
sc=playerObject.sound.play();
isPlaying = true;
play_btn.visible = false;
pause_btn.visible = true;

}

function funcOnLoadProgress(event:ProgressEvent):void
{
var loadedPct:uint =Math.round(100 * (event.bytesLoaded / event.bytesTotal));
trace("The playerObject.sound is " + loadedPct + "% loaded.");
}

function onIOError(e:IOErrorEvent)
{
trace("The playerObject.sound can not be Loaded"+ e.text);
}

//btns

play_btn.addEventListener(MouseEvent.CLICK,playmusic);
stop_btn.addEventListener(MouseEvent.CLICK,stopmusic);
pause_btn.addEventListener(MouseEvent.CLICK,pausemusic);
back_btn.addEventListener(MouseEvent.CLICK,backmusic);
fwd_btn.addEventListener(MouseEvent.CLICK,fwdmusic);
mute_btn.addEventListener(MouseEvent.CLICK,mute);

//play button
function playmusic(event:Event)
{
if (!isPlaying)
{
sc = playerObject.sound.play(pausePoint);
isPlaying = true;
play_btn.visible = false;
pause_btn.visible = true;
}
}

//pause button

function pausemusic(event:Event)
{
if (isPlaying)
{
pausePoint = sc.position;
sc.stop();
isPlaying = false;
play_btn.visible = true;
pause_btn.visible = false;
}
}

//stop button
function stopmusic(event:Event):void
{
if (isPlaying)
{
sc.stop();
isPlaying = false;
play_btn.visible = true;
pause_btn.visible = false;
}
pausePoint = 0.00;
flagsc=0;
}

//mute button
function mute(event:Event)
{
if (sc!=null)
{
var st:SoundTransform;
if (muted)
{
st = new SoundTransform(soundvolume);
sc.soundTransform = st;
this.mute_btn.on_mc.visible = true;
muted = false;
}
else
{
st = new SoundTransform(0);
sc.soundTransform = st;
this.mute_btn.on_mc.visible = false;
muted = true;
}
}
}

function fwdmusic(event:Event)
{
if (sc.position+forwardDuration<=playerObject.sound.bytesTotal) {
sc.stop();
sc=playerObject.sound.play(sc.position+forwardDuration);
}
else
{
pausePoint=0;
sc.stop();
flagsc=0;
}
}

function backmusic(event:Event)
{
if (sc.position-forwardDuration>0)
{
sc.stop();
sc=playerObject.sound.play(sc.position-forwardDuration);
}
else
{
pausePoint=0;
sc.stop();
flagsc=0;
}
}

var rect:Rectangle = new Rectangle(0,-5,100,0);
volume_mc.slider_mc.addEventListener(MouseEvent.MOUSE_DOWN, slideit); stage.addEventListener(MouseEvent.MOUSE_UP, stopslide);

function slideit(event:Event)
{
volume_mc.slider_mc.startDrag(false, rect);
addEventListener(Event.ENTER_FRAME, volumecontrol);
}

function stopslide(event:Event)
{
if(dragging)
{
volume_mc.slider_mc.stopDrag();
}
}

function volumecontrol(event:Event)
{
var val:Number = volume_mc.slider_mc.x/100;
var st:SoundTransform = new SoundTransform(val);
if(sc!=null)
{
sc.soundTransform = st;
muted = false;
}
}

I hope the explanation and script was simpler to understand.

Click here to download the source code - Downloadable source code file also includes script for slider.

The slider didn't seem to work properly over the net so I removed it from this tutorial and thought of retaining the same in source code file, just in case, if you need it.

Tags: Flash MP3 player, Flash audio player, List Component, Loading external XML data to list component, Sound, Sound Channel and Sound Transform class

 

HI, AM JAY, AND I IMAJINE
I am a freelance web designer and web application developer with over 7 years of result oriented experience. I am accustomed to working in a dynamic and goal oriented client environment. My strengths include the ability to visualize, personalize and create a truly unique and enthralling web presence. My passion apart from web design, logo design, Flash animation / actionscripting, CMS Customization, print and web development includes photography, game programming, tutorial development (includes Adobe Flash, Adobe Fireworks and Adobe Photoshop) and blogging.
TUTORIALS
Adobe Flash
Adobe Fireworks
CSS
Adobe Photoshop
----------------------------
HOBBIES
Photography1
Photography2
Comic Zone
----------------------------
OTHERS
Home
Testimonials
Quote
Memory Game
CONTACT US
Name :  
Email Address :  
 
Comments :
 
Bookmark and Share         jayanthi.varma@imajine.in  |  © 2008 - 2010 Imajine