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' />
</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 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):
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. Change CSS file with jQuery (3275)
  2. Ajax-PHP Chat Script (37152)
  3. Polygons with CSS (6705)
  4. Display data from PHP Array, or MySQL in HTML table (13969)
  5. Insert, Select and Update NULL value in MySQL (27921)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (524)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (451)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (329)
  4. Insert, Select and Update NULL value in MySQL (317)
  5. PHP getElementById and getElementsByTagName (307)