HTML5 Custom Audio Controls

[Dragonfire2008]

I already have custom controls for my audio and video elements, what I'm actually looking for is some help finding code for a seek bar, I can't seem to find a tutorial or piece of code that does this. It's the only thing browser controls have that I don't...

This is my current controls codes, if anyone wants to view it...

$(function(){
	
	// Stop if HTML5 audio isn't supported
	if(!document.createElement('audio').canPlayType) {
		$("#audio_controls").hide();
		return;
	}

var audio = document.getElementById("frontlinePlayer");

// Play/Pause =======================//
$("#play_pause").bind("click", function() {
	if(audio.paused) {
		audio.play();
		$("#playpause").attr("src", "_images/buttons/pause_button.png");
		$("#playpause").attr("alt", "Pause");
	} else {
		audio.pause();
		$("#playpause").attr("src", "_images/buttons/play_button.png");
		$("#playpause").attr("alt", "Play");
	}
});

// Play Progress ====================//
$(audio).bind("timeupdate", function(){
	var timePercent = (this.currentTime / this.duration)*100;
	$("#play_progress").css({ width: timePercent + "%" });
});

// Load Progress =====================//

$(audio).bind("progress", function() {
	updateLoadProgress();
});
$(audio).bind("loadeddata", function() {
	updateLoadProgress();
});
$(audio).bind("canplaythrough", function() {
	updateLoadProgress();
});
$(audio).bind("playing", function() {
	updateLoadProgress();
});
	

function updateLoadProgress(){
	if(audio.buffered.length > 0) {
		var percent = (audio.buffered.end(0) / audio.duration) * 100;	
		$("#load_progress").css({ width: percent + "%" });
	}
}

// Time Display ====================//

$(audio).bind("timeupdate", function(){
	$("#current_time").html(formatTime(this.currentTime))	
});
$(audio).bind("durationchange", function(){
	$("#duration_time").html(formatTime(this.duration))	
});


function formatTime(seconds) {
	var seconds = Math.round(seconds);
	var minutes = Math.floor(seconds / 60);
	// Remaining Seconds
	seconds = Math.floor(seconds % 60);
	// Add Leading Zeros
	minutes = (minutes >= 10) ? minutes : "0" + minutes;
	seconds = (seconds >= 10) ? seconds : "0" + seconds;
	return minutes + ":" + seconds;
}

if ($(audio).src = ""){
	$("#current_time").html("--:--");	
	$("#duration_time").html("--:--");	
}

});

<div id="audio_controls">
<div id="play_pause"><img id="playpause" src="_images/buttons/play_button.png" alt="Play" /></div>
<div id="progress">
	<div id="load_progress"></div>
	<div id="play_progress"></div>
</div>
<div id="tracktime">
	<span id="current_time">00:00</span> / 
    <span id="duration_time">00:00</span>
</div>
</div>

[xelawho]

if you had this for an html element:

<input type="range" id="seek" value="0" min="0"/>

then add a listerner:

$("#seek").bind("change", function() {
	audio.currentTime = this.value;
});

and a line to your "durationchange" listener:

$("#seek").attr("max", this.duration);

you might want to add something to move the slider as it plays. or maybe not.

[Dragonfire2008]

you might want to add something to move the slider as it plays. or maybe not.

If it wouldn't slide to edit the playing, then I wouldn't have a purpose for it...

[xelawho]

it edits the playing (if that's what you mean by jumping back or forth in the position of the track) but the slider doesn't move by itself as the song progresses.

a) have you tried it?
b) would you like help`getting the slider to move position as the track progresses?

[Dragonfire2008]

getting the slider to move along with the bar should not be hard, wouldnt i just put the slider after the play_progress div?

I'm currently trying to touch up my music player a little with some border radius on the progress bar, but getting some cross-browser problems...grr

[xelawho]

wouldnt i just put the slider after the play_progress div?

I don't know what that means, but all you would have to do is add this line to your timeupdate listener:

$("#seek").attr("value", this.currentTime);

[Dragonfire2008]

Now my problem is FF doesn't want to display the range as I want, while Chrome does it just fine. Also I noticed in Chrome the slider is not in sync with the time...\

UPDATE: The slider is not sync bc of CSS that sets the width, on the other hand, if I don't set the width in CSS, the slider is in sync but does not pass the default width set by the browser...

UPDATE2: Nvm, I'm am idiot...everything is working great, now have to deal with browser problems, Chrome displays as slider, FF as numbers...

UPDATE3: Because Firefox and IE don't fully support range yet...oh well

[xelawho]

yeah, but there are plenty of custom slider examples out there...

[Dragonfire2008]

I will attempt a custom slider at a later time...thanks for your help.