Search code examples
javascriptreactjsaudiovideo

How I can know audio/video duration before uploading?


I need to upload file (audio/video) using default input type='file' and the I should pass duration of the video in api request, how i ca do this?

  const uploadFile = async (event) => {
    let file = await event.target.files[0];
    //here api POST request where i should pass duration
   }:

Solution

  • You can get the audio duration with HTMLMediaElement.duration:

    async function getDuration(file) {
     const url = URL.createObjectURL(file);
    
     return new Promise((resolve) => {
       const audio = document.createElement("audio");
       audio.muted = true;
       const source = document.createElement("source");
       source.src = url; //--> blob URL
       audio.preload= "metadata";
       audio.appendChild(source);
       audio.onloadedmetadata = function(){
          resolve(audio.duration)
       };
     });
    }
    

    Then in your function:

    const uploadFile = async (event) => {
       let file = event.target.files[0];
        //here api POST request where i should pass duration
       const duration = await getDuration(file);
     }: