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

前言

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

实现

调用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的上下文。

相关推荐
拉不动的猪2 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪2 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom3 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom3 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom3 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom4 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
咖啡教室5 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室5 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀8 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
我不会编程5558 小时前
Python Cookbook-5.1 对字典排序
开发语言·数据结构·python