Learn how to easily get file information before uploading to your web server.
Get The Code:
<!DOCTYPE html>
<html>
<head>
<title> Get Audio Duration Time </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This will show you how to get audio duration time.">
<meta name="author" content="Code With Mark">
<meta name="authorUrl" content="http://codewithmark.com">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function()
{
var get_file_data = function (file_obj, cb)
{
var convert_sec_hhmmss = function(secs)
{
var sec_num = parseInt(secs, 10);
var hours = Math.floor(sec_num / 3600) % 24;
var minutes = Math.floor(sec_num / 60) % 60;
var seconds = sec_num % 60;
var time = [hours,minutes,seconds]
.map(function(v1)
{
if( v1 > 0)
{
return v1 < 10 ? "0"+v1 : v1;
}
})
.filter(function(v2, i2)
{
if(v2 !== "00" || i2 >0)
{
return v2;
}
})
.join(":");
return {time_sec:secs,time_formated:time};
};
var convert_file_size = function(file_size_in_bytes)
{
var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
var fSize = file_size_in_bytes;
var i=0;
while(fSize>900)
{
fSize/=1024;
i++;
}
var size_format = (Math.round(fSize*100)/100)+' '+fSExt[i];
var r1 =
{
size_bytes:file_size_in_bytes,
size_type:fSExt[i],
size_raw:(Math.round(fSize*100)/100),
size_formated: (Math.round(fSize*100)/100) + ' ' + fSExt[i],
};
return r1;
};
var container_id = 'temp_file_container';
var d1 = ''
+ '<div class="'+container_id+'" style="display:none;">'
+ '<br>'
+ '<audio controls class="temp_audio_mp3_container" ></audio>'
+ '</div>'
+ '';
$('body').append(d1);
var e0 = $(document).find('.' + container_id );
var e1 = e0.find('.temp_audio_mp3_container');
e1.attr("src", URL.createObjectURL(file_obj));
e1.on("canplay", function (e)
{
var file_duration = $(this).prop('duration');
var seconds = file_duration;
var s1 = convert_sec_hhmmss(file_duration);
e0.remove();
if (typeof(cb) == 'function')
{
cb(
{
file_obj:file_obj,
file_name:file_obj.name,
file_type:file_obj.type,
file_duration: convert_sec_hhmmss($(this).prop('duration')),
file_size:convert_file_size(file_obj.size),
});
}
});
};
$(document).on('change', '.mp3_file', function(event)
{
event.preventDefault();
var el_this = $(this);
var get_file = $(this).prop('files')[0];
if(get_file)
{
get_file_data(get_file, function(data)
{
console.log(data);
//clear file selection value
el_this.val('');
var file_type = data.file_type;
if(file_type.indexOf("audio") > -1)
{
$(document).find('.file_audio_video').html('<h4 class="text-left">Step 2 </h4> <audio controls style="width:100%;height:50px;"></audio>');
$(document).find('.file_audio_video').find('audio').attr("src", URL.createObjectURL(data.file_obj));
}
else if(file_type.indexOf("video") > -1)
{
$(document).find('.file_audio_video').html('<h4 class="text-left">Step 2 </h4><video controls style="width:100%;height: 350px;""></video>');
$(document).find('.file_audio_video').find('video').attr("src", URL.createObjectURL(data.file_obj));
}
$(document).find('.file_info').html('<pre class="bg-light" style="padding:10px;">'+JSON.stringify(data, undefined, 5)+'</pre>');
});
}
});
});
</script>
<body>
<div class="container" style="padding:100px;">
<h1 class="text-center">Get Audio/Video File Information</h1>
<br>
<h3>Step 1 </h3> <small><input type="file" value="" class="mp3_file"> </small>
<br><br>
<span class="file_audio_video text-center" ></span>
<br><br>
<span class="file_info" ></span>
</div>
</body>
</html>