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' />
</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 is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Get Duration of Audio /Video file before Upload

Last accessed pages

  1. Get and change IFrame content through a JavaScript script created in another IFrame (16553)
  2. Shape Tween - Flash Animation (6185)
  3. CSS Border (6122)
  4. Disable button and Enable it after specified time (17587)
  5. Follow the mouse cursor with a DIV inside a Parent (8391)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (524)
  2. CSS cursor property - Custom Cursors (70)
  3. The Mastery of Love (50)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (48)
  5. Read Excel file data in PHP - PhpExcelReader (46)