Vue 3 中通过 URL.createObjectURL 创建临时 blob URL 并用 Audio 元素监听 loadedmetadata 事件可本地快速获取音频时长，需设置 preload="metadata"、及时 revokeObjectURL 释放内存，并注意格式兼容性与移动端限制。
在 Vue 3 中处理音频文件上传时获取其时长，核心是**不依赖服务端、不在 DOM 中渲染 audio 标签、也不等待完整文件加载**，而是利用浏览器原生的 Audio（或 HTMLMediaElement）对象配合 loadedmetadata 事件，在本地快速提取元数据。
关键前提：用 URL.createObjectURL 创建临时地址
用户选择文件后，需先生成浏览器可识别的临时 URL，这是后续解析的基础：
- 调用
URL.createObjectURL(file)得到一个 blob URL（如blob:https://xxx/abcd-1234） - 该 URL 可被
new Audio()或new Video()直接使用，无需插入页面 - 注意：操作完成后应调用
URL.revokeObjectURL(url)释放内存，尤其在频繁上传场景下
正确监听时长：用 loadedmetadata，不是 canplay 或 loadeddata
loadedmetadata 是最可靠、最轻量的事件——它只等文件头部元信息（含 duration、width/height 等），对大音频文件极友好。常见误区包括：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 误用
canplay：可能触发过早（尚未解析出 duration），返回NaN - 误用
load或未设preload：会尝试加载大量数据，卡顿且不必要 - 正确做法：显式设置
audio.preload = 'metadata'，再绑定loadedmetadata
Vue 3 响应式写法示例（组合式 API + TypeScript）
以下是一个可直接复用的逻辑片段，适用于 beforeUpload 或自定义上传钩子中：
立即学习“前端免费学习笔记（深入）”；
const getAudioDuration = (file: File): Promise<number> => {
return new Promise((resolve, reject) => {
if (!file.type.startsWith('audio/')) {
reject(new Error('非音频文件'));
return;
}
const url = URL.createObjectURL(file);
const audio = new Audio();
audio.preload = 'metadata';
audio.src = url;
const cleanup = () => {
URL.revokeObjectURL(url);
audio.remove();
};
audio.addEventListener('loadedmetadata', () => {
const duration = audio.duration;
cleanup();
resolve(isFinite(duration) ? duration : 0);
});
audio.addEventListener('error', () => {
cleanup();
reject(new Error('无法读取音频元数据'));
});
});
};
// 在上传前调用
const beforeUpload = async (file: File) => {
try {
const duration = await getAudioDuration(file);
if (duration > 60) {
ElMessage.warning('音频时长不能超过 60 秒');
return false;
}
// 继续上传逻辑...
return true;
} catch (err) {
ElMessage.error(err.message);
return false;
}
};
注意事项与边界情况
实际项目中需留意这些细节：
-
格式兼容性：MP3、WAV、AAC、OGG 通常支持良好；某些编码异常或损坏文件可能无法触发
loadedmetadata -
移动端限制：iOS Safari 对 blob URL 的
Audio初始化有延迟或静音策略，建议加超时兜底（如 3s 后 reject） -
精度问题：
duration返回的是浮点秒（如123.456），显示时建议四舍五入到小数点后一位，或转为mm:ss格式 -
取消上传时清理：若用户中途取消，需手动
revokeObjectURL，否则内存泄漏
