Seek Bar

Seek bar using a DIv tag for the audio element

by andy_hop

HTML

<audio id="ah_player" ontimeupdate="showProgress();" onprogress="showBuffer();">
    <source src="http://api.soundcloud.com/tracks/87227010/stream?client_id=INSERT_YOUR CLIENT_ID" type="audio/mpeg" />
    <source src="https://api.soundcloud.com/tracks/87227010/download?client_id=INSERT_YOUR CLIENT_ID" type="audio/ogg" />
    Your Browser does not support HTML5. To enjoy the music, please update you Browser.
</audio>
<div id="ah_cust_player">
    <div class="player_part" id="play_pause">
        <div class="play">
            <img src="https://googledrive.com/host/0B8Z_CAIim4B7c0N5bGtUNVp3TVE/images/play.png" alt="play" title="play" id="playPauseObj" onclick="play_pause(this);" />
        </div>
          
    </div>
    <div  class="player_part" id="progress_container">
        <div class="bars" id="seek_track"></div>
        <div class="bars" id="buffer_bar" style="width:0;"></div>
        <div class="bars" id="progress_bar" style="width:0;"></div>
    </div>
    <div  class="player_part" id="time_ellapsed">00:00</div>
    <div  class="player_part" id="mute">
        <img src="https://googledrive.com/host/0B8Z_CAIim4B7c0N5bGtUNVp3TVE/images/sound.png" alt="mute" title="mute" id="playPauseObj" onclick="toggleMute(this);" />
    </div>
    <div  class="player_part" id="volume"></div>
</div>

CSS

#ah_cust_player{  
	
    background-color: #4F4F4F;
    padding: 2px 15px;
    height:20px;
    width:250px;
    font-size: 13px;
    color:white;    
    font-family: sans-serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
}
#time-ellapsed{

}

#play_pause{
    margin-right:10px;
    width:20px;
    height:20px;
}

#mute{
    margin-right:10px;
}

.play img, #mute img{    
    cursor:pointer;
    height:18px;
    width:auto;
}

.player_part{
    display: inline-block;
    height: 18px;
	line-height:18px;
    vertical-align:middle; 
    margin-right:10px;
	float:left;
	
    
}

#progress_container {
    width:100px;
    
    position:relative;
    overflow:hidden;
    
    margin-right: 10px;
    
   
}

#seek_track{
    width:100px;
    background-color:black;
       
}

#progress_bar {
    
    background-color:#B3B3B3;
        
}
#buffer_bar {
   
    background-color:#8C8C8C;
    
   
}
.bars {
    position:absolute;
	height:10px;
	margin-top:4px;
	
}

JavaScript

var aud;
var buff_bar;
var time_el;
/*
*********************Read Before you run***************************************************
Before trying to run this script you will need to create an app on soundcloud.
This will give you a client ID you can insert into the html <source> element's src attribute
*********************************************************************************************
*/
function toggleMute(obj){
    if(aud.muted == true){
        aud.muted = false;
        obj.src = "https://googledrive.com/host/0B8Z_CAIim4B7c0N5bGtUNVp3TVE/images/sound.png";
    }else{
        aud.muted = true;
        obj.src = "https://googledrive.com/host/0B8Z_CAIim4B7c0N5bGtUNVp3TVE/images/mute.png";
    }
}

function play_pause(obj){
   
    if(aud.paused == true){
        
        if(aud.currentTime == aud.duration){
            aud.currentTime = 0;            
        }
        obj.src = "https://googledrive.com/host/0B8Z_CAIim4B7c0N5bGtUNVp3TVE/images/pause.png";
        aud.play();
    }else{
        obj.src = "https://googledrive.com/host/0B8Z_CAIim4B7c0N5bGtUNVp3TVE/images/play.png";
        aud.pause();
    }
}

/*
function is_playing(){
    document.getElementById("playPauseObj").src = "https://googledrive.com/host/0B8Z_CAIim4B7c0N5bGtUNVp3TVE/images/pause.png";
}

function is_paused(){
     document.getElementById("playPauseObj").src = "https://googledrive.com/host/0B8Z_CAIim4B7c0N5bGtUNVp3TVE/images/play.png";
}
*/

function showProgress() {
    var dur = aud.duration;
    var curTime = aud.currentTime;
    
    var mins = Math.floor(curTime/60);
    mins = (mins < 10) ? "0" + mins : mins;
    
    
    var secs = Math.floor((curTime % 60));    
    secs = (secs < 10) ? "0" + secs : secs;
    time_el.innerHTML = mins + ":" + secs;    
    
    var percent = Math.floor((curTime / dur) * 100);
  

    prog_bar.style.width = percent.toString() + "%";
    var mins = Math.floor(aud.currentTime / 3600);
    
    
}

function showBuffer() {
    var dur =...