• HTML
• CSS
• JS

HTML

<audio id="miAudio" src="http://www.sonidosmp3gratis.com/sounds/the-avengers.mp3"></audio>

<div id="duracion">
	<span></span>
	<div></div>
</div>

<div id="botones">
	<button id="iniciar" onclick="iniciar()">&#8227;</button>
	<button id="reiniciar" onclick="reiniciar()">&#8635;</button>
</div>

<!--
    Mensaje: Todo el contenido está copiado correctamente excepto el archivo de audio 
    la cual cambie por otra mas actual, porque Classpiece aún no permite la subida de audio y 
    otros archivos opté por una dirección de internet que la obtuve de sonidosmp3gratis.com 
    y tambien todos los creditos para el autor de 'reproductor de audio controlado desde JavaScript' 
    que la pueden ubicar en :
    https://www.lawebdelprogramador.com/codigo/JavaScript/3823-Reproductor-de-audio-controlado-desde-JavaScript.html
-->

CSS

#duracion {width:100px;border:1px solid #808080;height:20px;margin:2px;}
#duracion,
#botones {padding:1px;float:left;}
#duracion span {width:1px;background-color:#bfbfbf;height:20px;position:absolute;}
#duracion div {text-align:center;position:relative;}
#botones {margin-left:5px;}
#botones button {font-size:1em;width:30px;}

JS

var miAudio=document.getElementById("miAudio");
var duracion=0;
var interval;
miAudio.ondurationchange = function() {
	duracion=miAudio.duration;
}
 
function iniciar()
{
	if(miAudio.paused)
	{
		// iniciamos
		miAudio.play();
		interval=setInterval(mostrarDuracion,100);
		document.getElementById("iniciar").innerHTML="Ⅱ";
	}else{
		// paramos
		miAudio.pause();
		clearInterval(interval);
		document.getElementById("iniciar").innerHTML="‣";
	}
}
 
function reiniciar()
{
	// nos posicionamos al inicio de la cancion
	miAudio.currentTime=0;
	if(miAudio.paused)
	{
		miAudio.play();
		interval=setInterval(mostrarDuracion,100);
	}
}
 
function mostrarDuracion()
{
	if(duracion>0)
	{
		porcentaje=miAudio.currentTime*100/duracion;
		document.getElementById("duracion").getElementsByTagName("span")[0].style.width=porcentaje+"px";
		document.getElementById("duracion").getElementsByTagName("div")[0].innerHTML=parseInt(porcentaje)+"%";
	}
}