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 是纯前端提示，无法阻止用户手动修改或拖入非法文件。必须配合以下措施：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 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 只是降低用户误操作的第一道门槛，别把它当防火墙。