Así
Código HTML:
Ver original<!DOCTYPE html>
/*<![CDATA[*/
button{
box-shadow: 1px 1px 0px #383838;
margin: 10px;
}
button:hover{
background: lime;
box-shadow: 1px 1px 0px #000;
}
/*]]>*/
<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;
}
//]]>
<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"/>
Saludos