html5 display audio currentTime

Me gustaría mostrar la hora actual de un elemento de audio html 5 y la duración de ese elemento. He estado buscando en Internet pero no puedo encontrar un script funcional que me permita mostrar cuánto tiempo duran los archivos de audio y cuál es el tiempo actualmente, p. Ej. 1:35/3:20.html5 display audio currentTime

¿Alguien tiene alguna idea :)?

Fuente

2011-02-14 Lenny Magico

Try audio.currentTime da nada? No estoy seguro de si funcionará. – c2h2

¿cómo lo agregaría? –

¿cómo agregaría eso?? –

He aquí un ejemplo:

<audio id="track" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg" 
     ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + '/' + Math.floor(this.duration);"> 
    <p>Your browser does not support the audio element</p> 
</audio> 
<span id="tracktime">0/0</span> 
<button onclick="document.getElementById('track').play();">Play</button>

Esto debería funcionar en Firefox y Chrome, para otros navegadores es probable que necesite añadir codificaciones alternativas.

Fuente

2011-02-14 14:57:24 robertc

Brillante gracias: D –

Funciona en Safari: D –

no puedo enlazar 'ontimeupdate' en mi js .. ¿cómo puedo hacer eso? –

aquí es de uso simple. tener en elementos HTML5 mente están todavía en las obras así que cualquier cosa puede cambiar:

audio = document.getElementsByTagName("audio")[0]; 

    //functions 
    audio.load(); 
    audio.play(); 
    audio.pause(); 

    //properties 
    audio.currentSrc 
    audio.currentTime 
    audio.duration

su referencia es HTML5 Audio

para obtener el horaActual mientras que el audio está jugando debe adjuntar el evento timeupdate y actualizar la hora actual dentro de la función de devolución de llamada.

simple tutorial audio/video html5 on dev.opera

Fuente

2011-02-14 14:50:41 kjy112

¿No te encanta cómo tus respuestas no son correctas a menos que escribas el código que OP quiere? Buena respuesta. – clamchoda

No quiero jugar con html5 hasta que sea oficial. demasiados navegadores para depurar lol = D gracias amigo. – kjy112

No estoy diciendo que su respuesta sea incorrecta, simplemente no entiendo el audio de JS y html 5 es nuevo para mí, así que no entendí bien qué hacer con esto :) –

La versión de robertc funcionará bien excepto por el hecho de que no convierte el número de segundos que obtienes desde math.floor() en valores de tiempo adecuados.

Aquí es mi función llamada cuando ontimeupdate se llama:

<audio id='audioTrack' ontimeupdate='updateTrackTime(this);'> 
    Audio tag not supported in this browser</audio> 
<script> 
function updateTrackTime(track){ 
    var currTimeDiv = document.getElementById('currentTime'); 
    var durationDiv = document.getElementById('duration'); 

    var currTime = Math.floor(track.currentTime).toString(); 
    var duration = Math.floor(track.duration).toString(); 

    currTimeDiv.innerHTML = formatSecondsAsTime(currTime); 

    if (isNaN(duration)){ 
    durationDiv.innerHTML = '00:00'; 
    } 
    else{ 
    durationDiv.innerHTML = formatSecondsAsTime(duration); 
    } 
} 
</script>

he modificado formatSecondsAsTime() de algo que encontré here:

function formatSecondsAsTime(secs, format) { 
    var hr = Math.floor(secs/3600); 
    var min = Math.floor((secs - (hr * 3600))/60); 
    var sec = Math.floor(secs - (hr * 3600) - (min * 60)); 

    if (min < 10){ 
    min = "0" + min; 
    } 
    if (sec < 10){ 
    sec = "0" + sec; 
    } 

    return min + ':' + sec; 
}

Fuente

2012-06-27 20:16:47 KStensland

para aquellos que están buscando para poner en práctica en su timeupdate jQuery.

<audio id="myAudio"> 
    <source src='test.mp3' type="audio/mp3" /> 
</audio> 

$("audio#myAudio").get(0).addEventListener("timeupdate",function(){ 
     // do your stuff here 
    });

Fuente

2013-11-12 10:05:48 yourkishore

Cuando utiliza audio.duration(). Le dará resultados en segundos. Solo tienes que cambiar esto en minutos y segundos. Demo of Code está aquí, espero que te ayude.

song.addEventListener('timeupdate',function(){ 

    var duration = song.duration; //song is object of audio. song= new Audio(); 

    var sec= new Number(); 
    var min= new Number(); 
    sec = Math.floor(duration);  
    min = Math.floor(sec/60); 
    min = min >= 10 ? min : '0' + min;  
    sec = Math.floor(sec % 60); 
    sec = sec >= 10 ? sec : '0' + sec; 

    $("#total_duration").html(min + ":"+ sec); //Id where i have to print the total duration of song. 

    });

Este código definitivamente funcionará para la duración total. Para obtener la hora actual, solo tiene que usar song.currentTime; en lugar de song.duration; El código completo seguirá siendo el mismo.

Fuente

2014-02-21 09:53:13

para encontrar la longitud de un archivo de audio es simple !:

<html> 
<head> 
</head> 
<body> 
    <audio controls="" id="audio"> 
     <source src="audio.mp3"> 
    </audio> 
    <button id="button"> 
    <p id="p"></p> 
     GET LENGTH OF AUDIO 
    </button> 
<script> 
    var MYAUDIO = document.getElementById(audio); 
    var MYBUTTON = document.getElementById(button); 
    var PARA = document.getElementById(p); 
    function getAudioLength() { 
     PARA.innerHTML = duration.MYAUDIO 
    } 
MYBUTTON.addEventListener(click, getAudioLength); 
</script> 
</body> 
</html>

Fuente

2015-09-20 06:18:31

En mecanografiado:

formatTime(seconds: number): string { 

    let minutes: any = Math.floor(seconds/60); 
    let secs: any = Math.floor(seconds % 60); 

    if (minutes < 10) { 
     minutes = '0' + minutes; 
    } 

    if (secs < 10) { 
     secs = '0' + secs; 
    } 

    return minutes + ':' + secs; 
}

Recuerde reemplazar números mágicos con constantes. Es un ejemplo.

Fuente

2017-01-10 14:55:13

ES6

 const audio = new Audio(); 
     audio.src = document.querySelector('#audio').src; 
     audio.play(); 
     audio.addEventListener('timeupdate', (event) => { 
      const currentTime = Math.floor(audio.currentTime); 
      const duration = Math.floor(audio.duration); 
     }, false);

Fuente

2017-07-16 10:21:37

Respuesta

Cuestiones relacionadas