我怎么知道 audio/video 上传前的持续时间？

Question

我需要使用默认 input type='file' 上传文件 (audio/video)，我应该在 api 请求中传递视频的持续时间，我该怎么做？

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

Answer 1

您可以通过 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)
   };
 });
}

然后在你的函数中：

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

Answer 2

您只需要根据用户输入创建一个元素(video/audio) 并获取持续时间属性 -

const VIDEO = "video",
        AUDIO = "audio";
      const uploadApiCall = (file, data = {}) => {
        // ----- YOUR API CALL CODE HERE -----
        document.querySelector("#duration").innerHTML = `${data.duration}s`;
        document.querySelector("#type").innerHTML = data.type;
      };

      let inputEl = document.querySelector("#fileinput");
      inputEl.addEventListener("change", (e) => {
        let fileType = "";
        let file = inputEl.files[0];
        if (file.type.startsWith("audio/")) {
          fileType = AUDIO;
        } else if (file.type.startsWith("video/")) {
          fileType = VIDEO;
        } else {
          alert("Unsupported file");
          return;
        }

        let dataURL = URL.createObjectURL(file);
        let el = document.createElement(fileType);
        el.src = dataURL;
        el.onloadedmetadata = () => {
          uploadApiCall(file, {
            duration: el.duration,
            type: fileType
          });
        };
      });

 <form>
      <input type="file" accept="video/*,audio/*" id="fileinput" />
      <hr />
      Type:<span id="type"></span>
      <br />
      Duration:<span id="duration"></span>
    </form>

我怎么知道 audio/video 上传前的持续时间？

How I can know audio/video duration before uploading?

javascript

audio

video

reactjs