The code presented in this page shows how to get the duration (in seconds) of an audio /video file before upload (AVI, MP3, MP4, MPEG, OGG), then, adding it into an input field in a form.
- Click on the code to select it.
<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" />
</form>
<audio id="audio"></audio>

<script>
// Code to get duration of audio /video file before upload - from: https://coursesweb.net/

//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;
  URL.revokeObjectURL(obUrl);
});

//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
  if(file.name.match(/\.(avi|mp3|mp4|mpeg|ogg)$/i)){
    obUrl = URL.createObjectURL(file);
    document.getElementById('audio').setAttribute('src', obUrl);
  }
});
</script>
- The <audio> element is necessary 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):
File:
Duration: seconds

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Get Duration of Audio /Video file before Upload

Last accessed pages

  1. Get the value of the selected /checked checkboxes in a form (37630)
  2. Read Excel file data in PHP - PhpExcelReader (56711)
  3. Get and Modify content of an Iframe (12777)
  4. AJAX with POST and PHP (11915)
  5. SHA256 Encrypt hash in JavaScript (5787)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (448)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (352)
  3. Register and show online users and visitors (321)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (214)