Here's a suggestion with SVG, which is the technology used on this site too:
var audio = document.querySelector('audio');
audio.addEventListener('timeupdate', function() {
var dur = this.duration;
var time = this.currentTime;
var fraction = time / dur;
var percent = (fraction * 100);
setProgress(percent);
});
audio.play();
var circle = document.querySelector('circle');
var text = document.querySelector('text');
var perimetro = 2 * Math.PI * circle.getAttribute('r');
circle.setAttribute('stroke-dasharray', perimetro); // defenir o comprimento da linha
circle.setAttribute('stroke-dashoffset', perimetro); // defenir o desfazamento (= ao perimetro)
circle.setAttribute('stroke-width', 10); // para só agora mostrar a linha
function setProgress(percent) {
var degs = percent * perimetro / 100;
circle.setAttribute('stroke-dashoffset', perimetro - degs);
text.innerHTML = Math.round(degs * 100 / perimetro) + ' %';
}
circle {
fill: transparent;
stroke: #aaf;
}
<audio id="player" src="http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3"></audio><svg><circlecx="80" cy="80" r="50" id="progressbar" stroke-width="0"></circle>
<text x="63" y="85">0%</text>
</svg>