Javascript Course

The code presented in this page shows how to get the duration (in seconds) of an audio /video file before upload it (AVI, MP3, MP4, MPEG, OGG), then, adds it into an input field in a form.

Script code

<h4>Example getting duration of audio/video file before upload</h4>
<p>Select an audio /video file</p>

<form action='#' method='post' enctype='multipart/form-data'>
 File: <input type='file' name='fup' id='fup' /><br>
 Duration: <input type='text' name='f_du' id='f_du' size='5' /> seconds<br>
 <input type='submit' value='Upload' />
<audio id='audio'></audio>

// Code to get duration of audio /video file before upload - from:

//register canplaythrough event to #audio element to can get duration
var f_duration =0; //store duration
document.getElementById('audio').addEventListener('canplaythrough', function(e){
 //add duration in the input field #f_du
 f_duration = Math.round(e.currentTarget.duration);
 document.getElementById('f_du').value = f_duration;

//when select a file, create an ObjectURL with the file and add it in the #audio element
var obUrl;
document.getElementById('fup').addEventListener('change', function(e){
 var file = e.currentTarget.files[0];
 //check file extension for audio/video type
 obUrl = URL.createObjectURL(file);
 document.getElementById('audio').setAttribute('src', obUrl);
- The <audio> element is used to can get the duration of the file that is added in the "src" attribute.
- When a file is selected for upload, it is created an object of that file, and adds it in the #audio element.
- The JavaScript get the duration of the audio /video file from the <audio> element, stores it in the f_duration variable, and adds it in the input field.
- When the form is submited to upload the file, the duration (in seconds) it is send on server in the #f_du input field (in PHP: $_POST['f_du']).

- Demo (select an audio /video file):
Duration: seconds

Daily Test with Code Example

Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
Indicate the PHP variable that contains data added in URL address after the "?" character.
if(isset($_GET["id"])) {
  echo $_GET["id"];
Get Duration of Audio /Video file before Upload

Last accessed pages

  1. How to use php variable in external js file (361)
  2. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (48952)
  3. How to get JSON data from JavaScript to PHP (175)
  4. JavaScript code and PHP (29598)
  5. Node.js Move and Copy Directory (8423)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (455)
  2. Register and show online users and visitors (324)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (247)
  4. JavaScript Course - Free lessons (237)
  5. querySelector and querySelectorAll (225)