Foros del Web - Ver Mensaje Individual

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