JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

circle {
    fill: transparent;
    stroke: #aaf;
}

JavaScript

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');
var degs = 0;
circle.setAttribute('stroke-dasharray', perimetro);
circle.setAttribute('stroke-dashoffset', perimetro);
circle.setAttribute('stroke-width', 10);

function setProgress(percent) {
    var degs = percent * perimetro / 100;
    circle.setAttribute('stroke-dashoffset', perimetro - degs);
    text.innerHTML = Math.round(degs * 100 / perimetro) + ' %';
}