通过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的上下文。

相关推荐
天天扭码1 分钟前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛6 分钟前
为什么vue的key值,不用index?
前端·javascript·vue.js
我真的不会C14 分钟前
QT窗口相关控件及其属性
开发语言·qt
CodeCraft Studio14 分钟前
Excel处理控件Aspose.Cells教程:使用 Python 在 Excel 中进行数据验
开发语言·python·excel
장숙혜17 分钟前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang20 分钟前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
WKK_26 分钟前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia26 分钟前
react 常用钩子 hooks 总结
前端·javascript·react.js
景天科技苑27 分钟前
【Rust】Rust中的枚举与模式匹配,原理解析与应用实战
开发语言·后端·rust·match·enum·枚举与模式匹配·rust枚举与模式匹配
阿让啊33 分钟前
C语言中操作字节的某一位
c语言·开发语言·数据结构·单片机·算法