<!DOCTYPE html>
<html>
<head>
<style>
#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;}
</style>
</head>
<body>
<audio id="miAudio" src="parte1.mp3"></audio>
<div id="duracion">
<span></span>
<div></div>
</div>
<div id="botones">
<button id="iniciar" onclick="iniciar()">‣</button>
<button id="reiniciar" onclick="reiniciar()">↻</button>
</div>
</body>
</html>
<script>
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)+"%"; }
}
</script>
Crear cuenta
