Progress bar in a Flash MP3 Player

Question

Hi

I have coded a simple XML driven MP3 player. I have used Sound and SoundChannel objects and method but I can´t find a way of make a progress bar.

I don´t need a loading progress I need a song progress status bar.

Canbd anybody help me?

Thanks.

UPDATE:

Theres is the code.

var musicReq: URLRequest;
var thumbReq: URLRequest;
var music:Sound = new Sound();
var sndC:SoundChannel;
var currentSnd:Sound = music;
var position:Number;
var currentIndex:Number = 0;
var songPaused:Boolean;
var songStopped:Boolean;
var lineClr:uint;
var changeClr:Boolean;
var xml:XML;
var songList:XMLList;

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, Loaded);

loader.load(new URLRequest("musiclist.xml"));

var thumbHd:MovieClip = new MovieClip();
thumbHd.x = 50;
thumbHd.y = 70;
addChild(thumbHd);

function Loaded(e:Event):void{
    xml = new XML(e.target.data);
    songList = xml.song;
    musicReq = new URLRequest(songList[0].url);
    thumbReq = new URLRequest(songList[0].thumb);
    music.load(musicReq);
    sndC = music.play();
    title_txt.text = songList[0].title + " - " + songList[0].artist;

    loadThumb();
    sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
}

function loadThumb():void{
    var thumbLoader:Loader = new Loader();
    thumbReq = new URLRequest(songList[currentIndex].thumb);
    thumbLoader.load(thumbReq);
    thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
}

function thumbLoaded(e:Event):void {
    var thumb:Bitmap = (Bitmap)(e.target.content);
    var holder:MovieClip = thumbHd;
    holder.addChild(thumb);
}

prevBtn.addEventListener(MouseEvent.CLICK, prevSong);
nextBtn.addEventListener(MouseEvent.CLICK, nextSong);
playBtn.addEventListener(MouseEvent.CLICK, playSong);

function prevSong(e:Event):void{
    if(currentIndex > 0){
        currentIndex--;
    }
    else{
        currentIndex = songList.length() - 1;
    }

    var prevReq:URLRequest = new URLRequest(songList[currentIndex].url);
    var prevPlay:Sound = new Sound(prevReq);
    sndC.stop();
    title_txt.text = songList[currentIndex].title + " - " + songList[currentIndex].artist;
    sndC = prevPlay.play();
    currentSnd = prevPlay;
    songPaused = false;
    loadThumb();
    sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
}

function nextSong(e:Event):void {
    if(currentIndex 

And here the code for the lenght and position. It´s inside a MovieClip. That´s why I use absolute path for find the Sound object.

this.addEventListener(Event.ENTER_FRAME, moveSpeaker);

var initWidth:Number = this.SpkCone.width;
var initHeight:Number = this.SpkCone.height;
var rootObj:Object = root;

function moveSpeaker(eventArgs:Event)
{
    var average:Number = ((rootObj.audioPlayer_mc.sndC.leftPeak + rootObj.audioPlayer_mc.sndC.rightPeak) / 2) * 10;
//  trace(average); 
//  trace(initWidth + ":" + initHeight);
    trace(rootObj.audioPlayer_mc.sndC.position + "/" + rootObj.audioPlayer_mc.music.length);
    this.SpkCone.width = initWidth + average;
    this.SpkCone.height = initHeight + average; 
}

Answer 1

You can get a normalized floating point value ( the percent complete ) by using: SoundChannel.position / Sound.length. Then you can use that value as a scalar for your sound playback progress indicator.

Psuedo Code:

// -- set the x scale of the progress bar to the percent complete
progbar.scaleX = channel.position / sound.length;

Answer 2

The Sound class has a "length" property indicating the length of the sound and the SoundChannel has a "position" property indicating the position of the sound currently playing. Use these 2 properties as data for a ProgressBar component.

Answer 3

you have to listen for the complete event, and inside of that set the scaleX to 1.