Getting the duration of an audio file on drop

[malimccalla]

Is it possible to get the duration of audio files on drop? I'm wanting to do something like this

  onDrop(files) {
    files.forEach((file) => {
       console.log(file.duration);
    })
  }

[malimccalla]

Anyone else who might want to do this I solved it by doing the following

  onDrop(files) {
    files.forEach((file) => {
    const audio = document.createElement('AUDIO');
    audio.src = file.preview;
    audio.addEventListener('loadedmetadata', () => {
       console.log(audio.duration);
    });
  }

Not sure if this is the right way to do it but it works for what I'm doing

[muhilham]

do you know how to get video duration if file is in .avi format?

[kumar88kanishk]

Hi @malimccalla i am trying to find the duration of a video file after it has been dropped. I implemented your hack but cant get inside loadedmetadata event. Can you help

[pbirsinger]

Seems like file.preview is undefined for me. Should it be file.path ?

Note: I am actually uploading an audio not video file.

[seanmaisch]

@muhilham @kumar88kanishk @pbirsinger

Revisiting this old topic because I was searching for the same solution. I was able to gather the video duration by using this code. In my scenario, I am allowing for a single video upload, hence the file[0] array selection. Hope someone finds this helpful in the future!

onDrop: (file) => {
	Object.assign(file[0], {
		preview: URL.createObjectURL(file[0])
	});

	const video = document.createElement("video");
	video.src = file[0].preview;

	video.addEventListener("loadedmetadata", () => {
		console.log(video.duration);
	});
}