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 HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Get Duration of Audio /Video file before Upload

Last accessed pages

  1. Get Duration of Audio /Video file before Upload (5913)
  2. Follow the mouse cursor with a DIV inside a Parent (2703)
  3. Register and show online users and visitors (23278)
  4. Node.js Move and Copy Directory (1127)
  5. SHA1 Encrypt data in JavaScript (8256)

Popular pages this month

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