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

What attribute makes an option from <select> selected?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Option 1</option>
 <option value="val2" selected="selected">Option 2</option>
What CSS value allows to create color gradients for background?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
What statement creates an array in JavaScript?
[] {} new Object()
var arr = [1, "", ""];
Indicate the PHP function used to redirect to other page.
function() header() switch()
Get Duration of Audio /Video file before Upload

Last accessed pages

  1. Create simple Website with PHP (32619)
  2. CSS cursor property - Custom Cursors (4488)
  3. addChild and removeChild (6417)
  4. jQuery Drag and Drop Rows between two similar Tables (10002)
  5. Node.js Move and Copy Directory (10937)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (32)
  2. SHA256 Encrypt hash in JavaScript (18)
  3. Get and Modify content of an Iframe (15)
  4. Create simple Website with PHP (14)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (12)