mostrar tiempo transcurrido de audio

alex_dh · #1 (**permalink**) 14/04/2013, 00:23

hola, estuve investigando un poco la etiqueta audio, y nunca se me dio por armar mi propio reproductor, pude hacer un div que sea el boton play, pause, volume... pero no se como mostrar el tiempo transcurrido del audio...

alguien me ayuda?

emprear · #2 (**permalink**) 14/04/2013, 10:44

Así

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Audio multiple</title>
<style type="text/css">
/*<![CDATA[*/
button{
box-shadow: 1px 1px 0px #383838;
margin: 10px;
}
button:hover{
background: lime;
box-shadow: 1px 1px 0px #000;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var audio,ta,fin,tiempo;
function rep(elaudio){
audio=document.getElementById(elaudio);
audio.load();
audio.play();
// ejecutamos con setInterval cada 1 seg la función verifica_fin()
var fin=window.setInterval(function(){
    verifica_fin();
    },1000);
}
 
function verifica_fin(){
if(audio.ended){// cuando finaliza ó está en pausa.... detenemos el setInterval
clearInterval(fin);
}else{
ta = Math.round(audio.currentTime); // recuperamos el tiempo actual de reproducción y lo redondeamos a un entero
var segs = ta.toString(); // convertimos el tiempo actual a una cadena para poder formatearlo en hh:mm:ss
document.getElementById('tiempox').innerHTML = segs.pasar_a_HHMMSS(); // mandamos el tiempo actual a un div en pantalla
}
}
// convertir segundos a horas:minutos:segundos
String.prototype.pasar_a_HHMMSS = function () {
    var num_segs    = parseInt(this);
    var horas   = Math.floor(num_segs / 3600);
    var minutos = Math.floor((num_segs - (horas * 3600)) / 60);
    var segundos = num_segs - (horas * 3600) - (minutos * 60);
 
    if (horas   < 10) {horas   = "0"+horas;}
    if (minutos < 10) {minutos = "0"+minutos;}
    if (segundos < 10) {segundos = "0"+segundos;}
    var tiempo    = horas+':'+minutos+':'+segundos;
    return tiempo;
}
 
//]]>
</script>
</head>
<body>
<audio preload="auto" id="sonido1" controls>
<source src="musica/you_dont_bring_me_flowers.mp3" type="audio/mp3"/>
<source src="musica/you_dont_bring_me_flowers.ogg" type="audio/ogg"/>
</audio>
<p>
<button onclick="rep('sonido1');">Reproducir 1</button>
<div id="tiempox">
    
</div>
</body>
</html>

Saludos

alex_dh · #3 (**permalink**) 14/04/2013, 12:06

tengo que hacer una barra que cargue (que marque el tiempo que va transcurriendo)

estuve viendo que lo hacen con un div, y le aumentan el ancho con porcentajes... como hago para pasar el audio a porcentajes para lograr eso?

emprear · #4 (**permalink**) 14/04/2013, 12:30

sacás el tiempo total del audio en segundos que será el 100%, y el 1% del total del audio será el total % 100, es decir para un audio de 2 minutos el uno % equivaldrá a 1.2 segundos.
Hacés un div de ancho 0 y con un color de fondo y lo ponés de dentro de otro div de un ancho definido en pixeles y cada vez que el tiempo transcurrido sea igual a
tiempo transcurrido + 1.2 incrementas el ancho del div con elemento.style.width en un 1%

Saludos

alex_dh · #5 (**permalink**) 14/04/2013, 13:27

algo asi? no se como ponerle la variable al porcentaje :(

Código Javascript:

Ver originalvar porcentaje = Math.floor((timeactual / timetotal) * 100);
document.getElementById('barra').style.width = porcentaje'%';