javascript - event - html5 muestra el audio currentTime
duration javascript (8)
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, por ejemplo, 1:35 / 3:20.
Alguien tiene alguna idea :)?
¡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>
Aquí hay 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 probablemente necesites agregar codificaciones alternativas.
Cuando usas 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á por una duración total. Para obtener la hora actual, solo tiene que usar song.currentTime; en lugar de song.duration; Todo el código seguirá siendo el mismo
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);
En 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;
}
Recuerde reemplazar los números mágicos con constantes. Es un ejemplo.
La versión de robertc funcionará bien, excepto por el hecho de que no convierte la cantidad de segundos que obtienes desde math.floor() en valores de tiempo apropiados.
Aquí está mi función llamada cuando se llama a ontimeupdate :
<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>
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;
}
aquí hay un uso simple. tenga en cuenta que los elementos html5 aún están en proceso, por lo que todo puede cambiar:
audio = document.getElementsByTagName("audio")[0];
//functions
audio.load();
audio.play();
audio.pause();
//properties
audio.currentSrc
audio.currentTime
audio.duration
aquí está el audio HTML5 de referencia
para obtener el tiempo actual mientras se reproduce el audio, debe adjuntar el evento timeupdate y actualizar su hora actual dentro de la función de devolución de llamada.
para aquellos que buscan implementar timeupdate en tu jquery.
<audio id="myAudio">
<source src=''test.mp3'' type="audio/mp3" />
</audio>
$("audio#myAudio").get(0).addEventListener("timeupdate",function(){
// do your stuff here
});