通过FileReader API获取上传音频的长度

Hello-Mr.Wang2024-08-25 11:12

前言

FileReader 接口允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

实现

调用FileReader API，并通过(window.AudioContext || window.webkitAudioContext)()创建音频上下文对象实现

代码示例

关键代码

const customRequest = (file) => {
  //创建FileReader
  const fileReader = new FileReader();
  //读取成功完成时触发
  fileReader.onload = (event) => {
    const arrayBuffer = event.target.result;
    //创建音频上下文对象
    const audioContext = new (window.AudioContext ||
      window.webkitAudioContext)();
    audioContext.decodeAudioData(arrayBuffer, async (buffer) => {
      const duration = Math.floor(buffer.duration); // 获取音频时长
      console.log("音频时长:", duration);
      //下面可做对音频时长限制的操作
    });
  };
  //当读取由于错误而失败时触发。
  fileReader.onerror = (error) => {
    console.error("Error reading file:", error);
  };
  //开始读取指定的 Blob 中的内容，读取完成，result 属性中将包含一个表示文件数据的 ArrayBuffer 对象
  fileReader.readAsArrayBuffer(file);
};

注意:最后一定要记得调用readAsArrayBuffe来读取内容，不然获取不到FileReader的上下文。