IT评测·应用市场-qidao123.com技术社区

标题: 通过FileReader API获取上传音频的长度 [打印本页]

---

作者: 钜形不锈钢水箱    时间: 2024-8-22 21:29
标题: 通过FileReader API获取上传音频的长度
前言
   FileReader 接口答应 Web 应用程序异步读取存储在用户盘算机上的文件（或原始数据缓冲区）的内容，利用 File 或 Blob 对象指定要读取的文件或数据。
  实现 
调用FileReader API，并通过(window.AudioContext || window.webkitAudioContext)()创建音频上下文对象实现
代码示例
关键代码

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

复制代码

  注意:末了一定要记得调用readAsArrayBuffe来读取内容，否则获取不到FileReader的上下文。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4