html5 progressbar,javascript - HTML5 Audio progress bar length - Stack Overflow

$(document).ready(function(){

var counter = 0;

var numOfTracks = $(".audio-player").length;

$("#play-bt").click(function(){

$(".audio-player")[counter].play();

$("#message").text("Music started");

})

$("#pause-bt").click(function(){

$(".audio-player")[counter].pause();

$("#message").text("Music paused");

})

$("#stop-bt").click(function(){

$(".audio-player")[counter].pause();

$(".audio-player")[counter].currentTime = 0;

$("#message").text("Music Stopped");

})

$("#next-bt").click(function(){

$(".audio-player")[counter].pause();

$(".audio-player")[counter].currentTime = 0;

counter++;

if(counter > numOfTracks - 1){

counter = 0 ;

}

$(".audio-player")[counter].play();

$("#message").text("Next Track started");

})

$("#prev-bt").click(function(){

$(".audio-player")[counter].pause();

$(".audio-player")[counter].currentTime = 0;

counter--;

$(".audio-player")[counter].play();

$("#message").text("Previous Track");

})

$(".audio-player").bind('timeupdate', function(){

//Gets the whole duration of the track.

//No idea kung saan ko ilalagay sa UI**IMPLEMENT LATER**

var track_length = $(".audio-player")[counter].duration;

var secs = $(".audio-player")[counter].currentTime;

var progress = (secs/track_length) * 100;

$('#progressbar').css({'width' : progress * 2});

//Will Use these later on production

//NOTE DO NOT DELETE

//Track Minutes

var tcMins = parseInt(secs/60);

//Track Seconds

var tcSecs = parseInt(secs - (tcMins * 60));

if (tcSecs < 10) { tcSecs = '0' + tcSecs; }

// Display the time. REMEMBER

$('#timecode').html(tcMins + ':' + tcSecs);

})

})

/*Seperate this some time in the development*/

#playerContainer{

background-color: #A8A8A8 ;

width: 260px;

height: 55px;

padding: 8px;

border: 1px solid #d0d0d0;

}

/* Player Controls */

/*list items of controls */

#playerControls li {

display: block;

width: 32px;

height: 32px;

padding: 0px;

float: left;

cursor: pointer;

}

#playerControls { list-style: none; padding: 0px; margin: 0px;}

/*Images for each li items items */

#play-bt { background: url('icons/glyphicons_173_play.png'); background-repeat:no-repeat }

#pause-bt {background: url('icons/glyphicons_174_pause.png'); background-repeat:no-repeat;}

#next-bt { background: url('icons/glyphicons_176_forward.png'); background-repeat:no-repeat}

#prev-bt {background: url('icons/glyphicons_172_rewind.png'); background-repeat:no-repeat;}

/*Progress Stuff*/

/*Remember to manipulate its width via javascript later*/

#progressContainer

{

background-color:#e0e0e0;

height: 14px;

width: 256px;

float: left;

margin-left: 0px;

}

#progressbar {background-color: #1384bb; height:14px; width:0%; }

Sorry your file doesn't support html5