Audio Demo
HTML
<div id="container">
<div id="audio"></div>
<div id="progressbar"><div id="progress"></div></div>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="seek">Seek sec</button><input id="sec" />
</div>
CSS
#progressbar {
border: 1px solid grey;
height: 10px;
width: 200px;
}
#progress {
position: relative;
height: 100%;
width: 0;
background: lightblue;
/*transition: all linear 1s;*/
}
JavaScript
var audio = new Audio("http://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3");
audio.controls = true;
$("#audio").append(audio);
$("#play").click(function() {
audio.play();
});
$("#pause").click(function() {
audio.pause();
});
$("#seek").click(function() {
audio.currentTime = parseFloat($("#sec").val());
});
$(audio).on("timeupdate", function() {
$("#progress").width((audio.currentTime / audio.duration) * 100 + '%')
});