Progress Seeking audio location using HTML5 Progress - css

Question

I am creating an audio player of sorts and i have run into a brick wall. I have added a progress bar that updates according to the song being played.
However, I want the progress bar to be clickable and to jump to the time of the track when its clicked (like every regular player).
<div class="music-stream-wrapper">
<ul class="music-stream">
<li>
<div class="player-wrapper">
<div class="album-art">
<img src="https://i1.sndcdn.com/artworks-000108593302-0ek7n6-t120x120.jpg" alt="" />
</div>
<div class="meta-controls">
<div class="play-controls">
<!-- Content -->
<div class="track">
<h4 class="title">Tail toddle - Unknown</h4>
<span class="author">john.doe</span>
<span class="uploaded">a few seconds ago</span>
</div>
<div class="spectrum">
<div class="play-pause-button">
</div>
<div class="spectrum-wrapper">
<div id="spectrum_11"></div>
<div class="progress">
<progress value="0" max="1"></progress>
</div>
</div>
</div>
</div>
<div class="intent">
<ul class="buttons">
<li>Like</li>
<li>Download</li>
<li>Share</li>
</ul>
<ul class="meta">
<li><span class="liked">♥ 13</span></li>
<li><span class="played">► 123</span></li>
<li><span>♥ 3</span></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<audio src="http://tonycuffe.com/mp3/tailtoddle_lo.mp3" id="mockSong"></audio>
I have created a mock player in CodePen heres the url: View in CodePen

Answer 1

I ended up using a jQuery UI slider and updating it dynamically as the track position changed.

Answer 2

It will help you. try to evaluate what you desire for
http://jsfiddle.net/ryanhagz/8u76B/20/
HTML
<div id="progress"></div>
<div id="back">back</div>
<div id="cont">cont</div>
JAVASCRIPT
//PROGRESS BAR
$("#progress").progressbar({
value: 0
});
//UPDATING PROGRESS BAR WHEN CONTINUE BUTTON CLICKED
var currValue = 0,
toValue = 0;
$("#cont").button().click(function () {
currValue = $("#progress").progressbar("value");
if (currValue + 25 <= 100) {
toValue = currValue + 25;
animateProgress();
}
});
//DECREASING PROGRESS BAR WHEN GO BACK BUTTON CLICKED
$("#back").button().click(function () {
currValue = $("#progress").progressbar("value");
if (currValue - 25 >= 0) {
toValue = currValue - 25;
animateProgress();
}
});
function animateProgress() {
if (currValue < toValue) {
$("#progress").progressbar("value", currValue + 1);
currValue = $("#progress").progressbar("value");
setTimeout(animateProgress, 4);
} else if (currValue > toValue) {
$("#progress").progressbar("value", currValue - 1);
currValue = $("#progress").progressbar("value");
setTimeout(animateProgress, 4);
}
}