HTML5 affichage audio currentTime

Question

HTML5 affichage audio currentTime

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

Quelqu'un a des idées :)?

25

audio duration html5 html5-audio javascript

demandé sur Lenny Magico 2011-02-14 17:08:39

8 réponses

score 20 · Answer 1

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 encodages alternatifs.

score 27 · Answer 2

Voici un usage simple. gardez à l'esprit que 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 le currentTime pendant la lecture audio, vous devez attacher l'événement timeupdate et mettre à jour votre heure actuelle dans la fonction de rappel.

Tutoriel simple audio / vidéo html5 sur dev.opéra

score 8 · Answer 3

La version de Robertc fonctionnera correctement sauf pour le 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ée:

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

score 3 · Answer 4

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

score 2 · Answer 5

Lorsque vous utilisez audio.durée(). Il vous donnera le résultat en quelques secondes. Vous avez juste à changer cela en quelques minutes et secondes. Démo de Code est ici, j'espère que cela 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 certainement pour la durée totale. Pour obtenir l'heure actuelle, il vous suffit d'utiliser song.currentTime; à la place de song.duration; Le code entier restera le même.

score 2 · Answer 6

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

score 0 · Answer 7

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

score 0 · Answer 8

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.

Las etiquetas más populares

HTML5 affichage audio currentTime

8 réponses