Edit in JSFiddle

var objectUrl;

$("#audio").on("canplaythrough", function(e){
    var seconds = e.currentTarget.duration;
    var duration = moment.duration(seconds, "seconds");
    
    var time = "";
    var hours = duration.hours();
    if (hours > 0) { time = hours + ":" ; }
    
    time = time + duration.minutes() + ":" + duration.seconds();
    $("#duration").text(time);
    
    URL.revokeObjectURL(objectUrl);
});

$("#file").change(function(e){
    var file = e.currentTarget.files[0];
   
    $("#filename").text(file.name);
    $("#filetype").text(file.type);
    $("#filesize").text(file.size);
    
    objectUrl = URL.createObjectURL(file);
    $("#audio").prop("src", objectUrl);
});

<p>Select a .mp3 file</p>
<input type="file" id="file" />

<audio id="audio"></audio>

<p>
  <label>File Name:</label>
  <span id="filename"></span>
</p>

<p>
  <label>File Type:</label>
  <span id="filetype"></span>
</p>

<p>
  <label>File Size:</label>
  <span id="filesize"></span>
</p>

<p>
  <label>Song Duration:</label>
  <span id="duration"></span>
</p>