Foros del Web » Creando para Internet » HTML »

mostrar tiempo transcurrido de audio

Estas en el tema de mostrar tiempo transcurrido de audio en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/04/2013, 00:23
Avatar de alex_dh  
Fecha de Ingreso: septiembre-2011
Ubicación: Kreuzberg
Mensajes: 235
Antigüedad: 10 años, 9 meses
Puntos: 14
mostrar tiempo transcurrido de audio

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?
__________________
Avanzado desarrollador HTML, CSS y programador PHP, MYSQL, JAVASCRIPT

=========CALLEJEROS INOCENTES=========
  #2 (permalink)  
Antiguo 14/04/2013, 10:44
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años
Puntos: 1567
Respuesta: mostrar tiempo transcurrido de audio

Así
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="utf-8" />
  4. <title>Audio multiple</title>
  5. <style type="text/css">
  6. /*<![CDATA[*/
  7. button{
  8. box-shadow: 1px 1px 0px #383838;
  9. margin: 10px;
  10. }
  11. button:hover{
  12. background: lime;
  13. box-shadow: 1px 1px 0px #000;
  14. }
  15. /*]]>*/
  16. <script type="text/javascript">
  17. //<![CDATA[
  18. var audio,ta,fin,tiempo;
  19. function rep(elaudio){
  20. audio=document.getElementById(elaudio);
  21. audio.load();
  22. audio.play();
  23. // ejecutamos con setInterval cada 1 seg la función verifica_fin()
  24. var fin=window.setInterval(function(){
  25.     verifica_fin();
  26.     },1000);
  27. }
  28.  
  29. function verifica_fin(){
  30. if(audio.ended){// cuando finaliza ó está en pausa.... detenemos el setInterval
  31. clearInterval(fin);
  32. }else{
  33. ta = Math.round(audio.currentTime); // recuperamos el tiempo actual de reproducción y lo redondeamos a un entero
  34. var segs = ta.toString(); // convertimos el tiempo actual a una cadena para poder formatearlo en hh:mm:ss
  35. document.getElementById('tiempox').innerHTML = segs.pasar_a_HHMMSS(); // mandamos el tiempo actual a un div en pantalla
  36. }
  37. }
  38. // convertir segundos a horas:minutos:segundos
  39. String.prototype.pasar_a_HHMMSS = function () {
  40.    var num_segs    = parseInt(this);
  41.    var horas   = Math.floor(num_segs / 3600);
  42.    var minutos = Math.floor((num_segs - (horas * 3600)) / 60);
  43.    var segundos = num_segs - (horas * 3600) - (minutos * 60);
  44.  
  45.    if (horas   < 10) {horas   = "0"+horas;}
  46.    if (minutos < 10) {minutos = "0"+minutos;}
  47.    if (segundos < 10) {segundos = "0"+segundos;}
  48.    var tiempo    = horas+':'+minutos+':'+segundos;
  49.    return tiempo;
  50. }
  51.  
  52. //]]>
  53. </head>
  54. <audio preload="auto" id="sonido1" controls>
  55. <source src="musica/you_dont_bring_me_flowers.mp3" type="audio/mp3"/>
  56. <source src="musica/you_dont_bring_me_flowers.ogg" type="audio/ogg"/>
  57. <p>
  58. <button onclick="rep('sonido1');">Reproducir 1</button>
  59. <div id="tiempox">
  60.    
  61. </div>
  62. </body>
  63. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 14/04/2013, 12:06
Avatar de alex_dh  
Fecha de Ingreso: septiembre-2011
Ubicación: Kreuzberg
Mensajes: 235
Antigüedad: 10 años, 9 meses
Puntos: 14
Respuesta: mostrar tiempo transcurrido de audio

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?
__________________
Avanzado desarrollador HTML, CSS y programador PHP, MYSQL, JAVASCRIPT

=========CALLEJEROS INOCENTES=========
  #4 (permalink)  
Antiguo 14/04/2013, 12:30
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años
Puntos: 1567
Respuesta: mostrar tiempo transcurrido de audio

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 14/04/2013, 13:27
Avatar de alex_dh  
Fecha de Ingreso: septiembre-2011
Ubicación: Kreuzberg
Mensajes: 235
Antigüedad: 10 años, 9 meses
Puntos: 14
Respuesta: mostrar tiempo transcurrido de audio

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

Código Javascript:
Ver original
  1. var porcentaje = Math.floor((timeactual / timetotal) * 100);
  2. document.getElementById('barra').style.width = porcentaje'%';
__________________
Avanzado desarrollador HTML, CSS y programador PHP, MYSQL, JAVASCRIPT

=========CALLEJEROS INOCENTES=========

Etiquetas: audio, tiempo, transcurrido
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:00.