How to Get The HTML5 Audio's Duration Time

HTML5: How to get currentTime and duration of Audio Tag in milliseconds

You can use:

<audio id="track" controls>
  <source src="your.mp3" type="audio/mpeg">
  <source src="your.ogg" type="audio/ogg">
</audio> 
<script type="text/javascript">
var audio = document.getElementById('track');
audio.addEventListener('timeupdate',function(){
    var currentTimeMs = audio.currentTime*1000;
    console.log(currentTimeMs);
},false);
</script>

You can read here for more information on the precision of the timeupdate event. It is dependent on the browser implementation so keep in mind you will get different results from a browser/device to another.

You should use addEventListener method rather than the ontimeupdate property - it is more maintainable.

Also if you need browser coverage it is good to use both ogg and mp3 audio files as sources.

html5 get audio duration in 00:00 format?

You could add a zero if the minutes is lower than 10 for the duration time:

if (minutes < 10) {
    minutes += "0";
}
$('.Audio_durationTime').text(minutes + ':' + seconds);

Updated fiddle:

http://jsfiddle.net/8cpwv2mf/7/

html5 display audio currentTime

Here's an example:

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

This should work in Firefox and Chrome, for other browsers you'll probably need to add alternative encodings.

How to get audio.duration from a <audio> player and save it to a div on a click?

$(function(){
    $('#btn').click(function() {
       var audio = $("#audio-1")[0];
      
            $("#duration").html(audio.duration);
    });
});

<html>
  <head>
    <title>First Pen</title>
  </head>
  <body>
    <div>
      <div id="duration"></div>

<button id="btn">Click</button>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="audio-1" src="https://media.acast.com/dth/weekinreviewfortheweekof6-21-21-dth/media.mp3" preload="metadata"></audio>
    </div>
  </body>
</html>

HTML5 duration time of MP3 sometimes works

This is probably because of cache.

If you are setting your audio's src in the markup (html), the cached version of your media may already be loaded* when you attach the event listener.

Hence your event handler won't fire ever :

window.onload = function(){ // kinda force the situation
  aud.onloadedmetadata = function(e){  // this won't fire    console.log('metatadata loaded');    };  };

<audio src="https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3" id="aud"/>