HTML5中MediaRecorder录制麦克风音频需四步：1. 安全上下文下调用getUserMedia({audio:true})获取授权音频流；2. 用isTypeSupported检测后创建MediaRecorder实例；3. 监听dataavailable收集Blob片段，stop后合并为完整Blob；4. 通过audio标签播放或a标签下载，Safari需注意兼容性及MP3需转码。
在HTML5中使用 MediaRecorder 接口录制麦克风音频，核心是先获取用户授权的音频流（MediaStream），再用 MediaRecorder 捕获并导出为可下载的音频文件（如 WAV 或 MP3）。整个过程不依赖后端，纯前端完成。
1. 请求麦克风权限并获取音频流
必须通过 navigator.mediaDevices.getUserMedia() 获取用户许可。注意只请求音频（{ audio: true }），避免不必要的视频权限弹窗。
- 需在安全上下文（HTTPS 或 localhost）中运行，否则浏览器会拒绝调用
- 建议添加错误处理，捕获用户拒绝、设备不可用等常见异常
- 示例代码片段：
let stream;
try {
stream = await navigator.mediaDevices.getUserMedia({ audio: true });
} catch (err) {
console.error("无法访问麦克风：", err.name, err.message);
return;
}
2. 创建并配置 MediaRecorder 实例
MediaRecorder 构造函数接收音频流，并可指定 mimeType 控制输出格式。浏览器支持程度不同，推荐优先尝试 audio/webm（广泛支持、含 Opus 编码），再降级到 audio/wav（部分浏览器需手动封装）。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Chrome / Edge 支持
audio/webm;codecs=opus，录制质量高、体积小 - Safari 目前仅支持
audio/mp4（需 iOS 16.4+ / macOS 13.3+），且需额外处理（如用 FFmpeg.wasm 转码） - 不要硬编码不支持的类型，可用
MediaRecorder.isTypeSupported()检测
3. 开始录制、收集数据块并生成 Blob 文件
录制过程依赖三个关键事件：start、dataavailable（每次有新音频块）、stop。所有 dataavailable 触发的 event.data 是 Blob 片段，需存入数组，最后合并为完整音频文件。
立即学习“前端免费学习笔记（深入）”；
- 在
dataavailable中将event.data推入chunks = [] - 调用
recorder.stop()后触发stop事件，此时用new Blob(chunks, { type: mimeType })合成最终文件 - 可立即创建 URL 并用于播放或下载（
URL.createObjectURL(blob)）
4. 提供播放与下载功能
生成 Blob 后，可通过 <audio> 标签预览录音，也可构造 <a download="recording.webm"> 链接实现一键下载。
- 下载前确保设置正确的
type和文件扩展名（如.webm对应audio/webm） - 移动端注意：Safari 对自动下载有限制，建议引导用户长按链接保存
- 若需 MP3，前端需借助第三方库（如
ffmpeg.wasm）转码，无法直接由MediaRecorder输出
