web-dev-qa-db-fra.com

html5 affichage audio heure actuelle

Je voudrais afficher l'heure actuelle d'un élément audio html 5 et la durée de cet élément. Je cherche sur Internet mais je ne trouve pas de script fonctionnel qui me permette d'afficher la durée des fichiers audio et l'heure actuelle, par exemple. 1:35/3:20.

Quelqu'un a une idée :)?

javascripthtml5audiodurationhtml5-audio
26
Lenny Magico

Voici un exemple:

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

Cela devrait fonctionner dans Firefox et Chrome. Pour les autres navigateurs, vous devrez probablement ajouter des codages alternatifs.

22
robertc

voici un usage simple. Gardez à l'esprit les éléments html5 sont toujours en cours, donc tout peut changer:

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

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

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

voici la référence HTML5 Audio

pour obtenir l'heure en cours pendant la lecture, vous devez associer l'événement timeupdate et mettre à jour l'heure actuelle dans la fonction de rappel.

tutoriel audio/vidéo simple html5 sur dev.opera

26
KJYe.Name

la version de robertc fonctionnera correctement, à l'exception du fait qu'elle ne transforme pas le nombre de secondes que vous obtenez de math.floor() en valeurs de temps appropriées. 

Voici ma fonction appelée quand ontimeupdate est appelé:

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

J'ai modifié formatSecondsAsTime() à partir de quelque chose que j'ai trouvé ici :

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

Lorsque vous utilisez audio.duration (). Cela vous donnera un résultat en quelques secondes. Il vous suffit de changer cela en minutes et en secondes. La démo de Code est là, espérons qu'elle vous aidera.

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.

    });

Ce code fonctionnera définitivement pour une durée totale. Pour obtenir l'heure actuelle, il vous suffit d'utiliser song.currentTime; au lieu de song.duration; Le code entier restera identique.

3
Anuj Sharma

pour ceux qui cherchent à implémenter timeupdate dans votre jQuery.

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

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

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);
2
Israt Jahan Simu

trouver la longueur d'un fichier audio est 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>
0
Smit Shilpatul

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

N'oubliez pas de remplacer les nombres magiques par des constantes. C'est un exemple.

0
Ivan Lencina