html5 mostra audio currentTime

Vorrei visualizzare l’ora corrente di un elemento audio html 5 e la durata di quell’elemento. Ho cercato su internet ma non riesco a trovare uno script funzionale che mi permetta di visualizzare per quanto tempo sono i file audio e qual è l’ora corrente, ad esempio 1:35 / 3:20.

Qualcuno ha qualche idea :)?

Ecco un esempio:

 0 / 0  

Questo dovrebbe funzionare in Firefox e Chrome, per altri browser probabilmente dovrai aggiungere codifiche alternative.

ecco un semplice utilizzo. tenere presente che gli elementi HTML5 sono ancora in lavorazione, quindi tutto può cambiare:

  audio = document.getElementsByTagName("audio")[0]; //functions audio.load(); audio.play(); audio.pause(); //properties audio.currentSrc audio.currentTime audio.duration 

ecco il riferimento HTML5 Audio

per ottenere il tempo corrente durante la riproduzione dell’audio, è necessario albind l’evento timeupdate e aggiornare l’ora corrente all’interno della funzione di callback.

semplice tutorial audio / video html5 su dev.opera

La versione di robertc funzionerà bene, tranne per il fatto che non trasforma il numero di secondi che ottieni da math.floor() in valori di tempo adeguati.

Ecco la mia funzione chiamata quando viene chiamato ontimeupdate :

   

Ho modificato formatSecondsAsTime() da qualcosa che ho trovato qui :

 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; } 

per coloro che stanno cercando di implementare il timeupdate nel jquery.

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

Quando si utilizza audio.duration (). Ti darà risultato in secondi. Devi solo cambiarlo in minuti e secondi. Demo of Code è qui, spero che ti possa aiutare.

 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. }); 

Questo codice funzionerà sicuramente per la durata totale. Per ottenere l’ora corrente, devi solo usare song.currentTime; al posto di song.duration; L’intero codice rimarrà lo stesso.

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); 

trovare la lunghezza di un file audio è semplice !:

          

Su TypeScript:

 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; } 

Ricorda di sostituire i numeri magici con le costanti. È un esempio