accept="audio/*"是最直接有效的写法，但需显式列出audio/mpeg,audio/wav,audio/ogg,audio/mp4更可靠；accept仅为前端提示，必须配合js校验与服务端魔数验证。
accept="audio/*" 是最直接有效的写法
浏览器原生支持通过 accept 属性过滤文件类型，限制音频只需在 <input type="file"> 中设置 accept="audio/*"。它会触发系统文件选择器只显示常见音频格式（如 .mp3、.wav、.ogg、.m4a），但注意：这不是强制拦截，用户仍可能通过“所有文件”选项绕过。
多个具体 MIME 类型比通配符更可靠
某些浏览器（尤其是旧版 Safari 或移动端）对 audio/* 支持不一致，推荐显式列出常用类型：
-
accept="audio/mpeg,audio/wav,audio/ogg,audio/mp4"覆盖绝大多数实际场景 -
audio/mpeg对应.mp3，audio/wav对应.wav，audio/ogg对应.ogg和.oga - 避免写
audio/x-wav这类非标准类型，部分系统识别失败 - 如果后端只接受
.mp3，可退一步用accept=".mp3"（扩展名优先级高于 MIME）
仅靠 accept 不足以保证安全
accept 是纯前端提示，无法阻止用户手动修改或拖入非法文件。必须配合以下措施：
- JavaScript 拦截
change事件，检查file.type是否以"audio/"开头，再校验file.name后缀 - 服务端必须重新验证：读取文件魔数（magic bytes）或使用 MIME 探测库（如 Node.js 的
file-type），不能只信Content-Type请求头 - 上传前用
file.size做客户端大小限制（比如 ≤50MB），避免大文件卡死 UI
移动端和 Safari 的特殊表现
iOS Safari 对 accept 的支持较弱，有时即使写了 audio/* 仍会显示所有文件。此时可加一层体验优化：
- 用
capture="microphone"强制调起录音权限（仅限移动端，且用户授权后才生效） - 搭配
multiple属性允许一次选多个音频，但需注意 iOS 上capture和multiple互斥 - 不要依赖
webkitdirectory——它只用于文件夹，且与音频限制无关
真正起作用的永远是服务端校验；accept 只是降低用户误操作的第一道门槛，别把它当防火墙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
