How to make a circle-shaped audio player that calculates the time around you?

Question

So.. I saw a player on a website: http://nicolaserrera.com/ and wanted to know how I can do a similar..

Answer 1

Here is a suggestion with SVG, which is the technology used on this site also:

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>
    <circle cx="80" cy="80" r="50" id="progressbar" stroke-width="0"></circle>
    <text x="63" y="85">0%</text>
</svg>

jsFiddle: http://jsfiddle.net/6vna34e2/