www.webdeveloper.com
Results 1 to 9 of 9

Thread: HTML5 Custom Audio Controls

  1. #1
    Join Date
    Dec 2011
    Posts
    163

    Question HTML5 Custom Audio Controls

    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...

    HTML Code:
    $(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("--:--");	
    }
    
    });
    HTML Code:
    <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>

  2. #2
    Join Date
    Nov 2010
    Posts
    1,090
    if you had this for an html element:
    Code:
    <input type="range" id="seek" value="0" min="0"/>
    then add a listerner:
    Code:
    $("#seek").bind("change", function() {
    	audio.currentTime = this.value;
    });
    and a line to your "durationchange" listener:
    Code:
    $("#seek").attr("max", this.duration);
    you might want to add something to move the slider as it plays. or maybe not.

  3. #3
    Join Date
    Dec 2011
    Posts
    163
    Quote Originally Posted by xelawho View Post
    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...

  4. #4
    Join Date
    Nov 2010
    Posts
    1,090
    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?

  5. #5
    Join Date
    Dec 2011
    Posts
    163
    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

  6. #6
    Join Date
    Nov 2010
    Posts
    1,090
    Quote Originally Posted by Dragonfire2008 View Post
    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:
    Code:
    $("#seek").attr("value", this.currentTime);

  7. #7
    Join Date
    Dec 2011
    Posts
    163
    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
    Last edited by Dragonfire2008; 05-11-2012 at 06:46 PM.

  8. #8
    Join Date
    Nov 2010
    Posts
    1,090
    yeah, but there are plenty of custom slider examples out there...

  9. #9
    Join Date
    Dec 2011
    Posts
    163
    I will attempt a custom slider at a later time...thanks for your help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles