html5录音需先通过navigator.mediadevices.getusermedia获取麦克风音频流，必须在https或localhost环境下由用户交互触发，请求时指定{audio:true}并处理权限、设备占用等错误，所得mediastream可用于播放、分析、录制或webrtc传输。
HTML5 录音的核心是获取麦克风音频流并加以利用，MediaStream API（主要通过 navigator.mediaDevices.getUserMedia）正是完成这一步的关键。它本身不录音，但为后续录制、分析或传输提供原始音频数据源。实际使用中需注意权限、安全上下文和设备状态等硬性前提。
必须满足的安全与交互条件
浏览器强制要求：页面必须运行在 HTTPS 或 http://localhost 环境下，否则直接拒绝调用。同时，getUserMedia 必须由用户明确操作触发（例如点击按钮），不能在页面加载时自动执行——否则多数浏览器会静默失败。
- 检查当前地址栏协议是否为 https:// 或以 localhost 开头
- 把请求逻辑写在按钮的
click事件里，例如：btn.addEventListener('click', async () => { ... }) - 避免在
DOMContentLoaded或load中直接调用
正确请求并处理麦克风流
只请求音频可减少干扰，提升用户体验。成功后得到的 MediaStream 对象可直接用于播放、分析或传给 MediaRecorder。
- 使用
{ audio: true }显式声明，不加video项 - 建议启用基础音频处理选项，如
{ audio: { echoCancellation: true, noiseSuppression: true } } - 务必用
try/catch捕获常见错误：NotAllowedError（用户拒绝）、NotFoundError（无可用设备）、NotReadableError（设备被占用） - 保存对
stream的引用，后续可能需要停止轨道（stream.getTracks().forEach(t => t.stop())）释放资源
流的典型用途与衔接方式
拿到 MediaStream 后，可根据需求选择不同路径：
-
实时播放：赋值给
<audio></audio>元素的srcObject属性，再调用play() -
实时分析：接入
AudioContext，用createMediaStreamSource(stream)创建源节点，连接AnalyserNode获取频谱或响度数据 -
录制为文件：传入
MediaRecorder构造函数，配合ondataavailable和onstop生成Blob -
WebRTC 传输：作为本地流添加到
RTCPeerConnection，用于语音通话或直播
常见问题快速排查
若无法获取流，优先确认以下几点：
- 系统设置中麦克风未被禁用，且有物理设备接入（笔记本需确认未插耳机导致内置麦失效）
- 浏览器地址栏右侧锁形图标中，网站的麦克风权限是否设为“允许”
- 是否有其他应用（如 Zoom、Teams）正独占麦克风
- Safari 用户注意：仅支持 macOS 13.3+ / iOS 16.4+ 的
audio/mp4录制，且createMediaStreamSource不接受含视频轨的流
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
