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 tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Get Duration of Audio /Video file before Upload

Last accessed pages

  1. Multiple upload files (806)
  2. Contact page - CoursesWeb (2153)
  3. Tabs effect with CSS (2865)
  4. JavaScript code and PHP (22408)
  5. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (13585)

Popular pages this month

  1. Contact page - CoursesWeb (1639)
  2. Tabs effect with CSS (1625)
  3. Insert, Select and Update NULL value in MySQL (823)
  4. Read Excel file data in PHP - PhpExcelReader (653)
  5. PHP getElementById and getElementsByTagName (414)