title: HTML5 audio clicking the progress bar to move to a different time
body: <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(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 &gt; 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 &lt; 10) { tcSecs = '0' + tcSecs; }
  
                      // Display the time. REMEMBER
                      $('#timecode').html(tcMins + ':' + tcSecs);
                  })
              })
          &lt;/script&gt;
              &lt;style&gt;
  
          /*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%; }
  
              &lt;/style&gt;
      &lt;/head&gt;
  &lt;body&gt;
              &lt;audio class ="audio-player"  name= "audio-player" src="04-zedd-stars_come_out_(terravita_remix).ogg" &gt;
                  &lt;p&gt;Sorry your file doesn't support html5&lt;/p&gt;
              &lt;/audio&gt;
              &lt;!--Second Track For Testing Purposes--&gt;
              &lt;audio  class ="audio-player" name= "audio-player" src="01-hard_rock_sofa-quasar.mp3" &gt;&lt;/audio&gt;
  
              &lt;div id="message"&gt;&lt;/div&gt;
                  &lt;div id = "playerContainer"&gt;
  
                      &lt;ul id =  "playerControls" &gt;
                          &lt;li id = "prev-bt"&gt;&lt;/li&gt;
                          &lt;li id= "play-bt"&gt;&lt;/li&gt;
                          &lt;li id= "pause-bt"&gt;&lt;/li&gt; 
                          &lt;li id = "next-bt"&gt;&lt;/li&gt;
                          &lt;li id= "stop-bt" &gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span id ="timecode"&gt;&lt;/span&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
                          &lt;div id="progressContainer"&gt;&lt;!-- Progess bars container //--&gt;
                              &lt;div id="progressbar"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How can I click a certain part of my progress bar so that I can move it to a different time in the track? I have no idea on how I am going to do that. any ideas ?</p>