基于AudioContext、getUserMedia与WebSocket的前端音频采集推流实现问题

一、满足自动播放策略的单按钮录音交互 #

针对需要连续点击两次才能启动、状态提示不明确的问题，核心要调整的点是把AudioContext的创建时机从页面加载阶段移到用户交互的同步执行栈内，配合状态标记实现单次点击切换录音状态：

• 全局仅声明audioCtx、isRecording两个变量，页面加载阶段不做任何AudioContext实例化、getUserMedia权限请求的动作
• 给录音按钮绑定统一的点击回调，根据isRecording标记分支执行逻辑：
  • 当isRecording为false（未录音状态）：
    1. 同步创建新的AudioContext实例，由于整个创建动作发生在用户点击的交互执行栈内，实例默认会直接处于running状态，无需额外等待resume()的异步流程，从根源解决需要连续点两次的问题
    2. 依次完成麦克风权限申请、音频处理节点初始化、启动推流的全流程，把isRecording标记设为true，按钮文本同步更新为“停止录音”，让用户明确知道录音已启动
  • 当isRecording为true（录音中状态）：
    1. 按顺序清理音频处理节点、停止麦克风轨道、关闭AudioContext实例
    2. 把isRecording标记重置为false，按钮文本更新回“开始录音”，从逻辑上终止录音流程，避免后台持续采集的状态提示异常

注：之前需要连续点击两次的本质原因，是旧代码在页面加载阶段就创建了处于suspended状态的AudioContext，第一次点击仅触发resume()的异步授权请求，需要等异步回调返回后上下文才能正常使用，第二次点击才会执行后续采集逻辑，把实例化动作移到交互同步栈后，这个问题会直接消失。

二、标准getUserMedia接口的兼容处理 #

针对接口切换后的兼容问题，不需要把旧的厂商前缀逻辑放在核心调用链路里，仅做低版本降级兜底即可：

• 核心调用流程优先判断navigator.mediaDevices?.getUserMedia是否存在，存在就直接走标准Promise风格的接口调用，申请{ audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true } }的单声道音频流
• 仅当标准接口不存在时，依次探测旧版实现（navigator.webkitGetUserMedia、navigator.mozGetUserMedia、navigator.getUserMedia），把这些回调式的旧接口封装成Promise格式，和标准接口的返回结构对齐，后续的音频处理逻辑完全不需要调整，因为不管哪种兼容路径拿到的都是标准MediaStream对象
• 不需要为了兼容旧接口修改核心的音频采样、重采样、推流逻辑，降低维护成本

三、Web Audio节点串联的重采样推流实现 #

针对节点逻辑不清晰的问题，整个音频处理链路是单向的独立流，不需要引入外部重采样库，也不需要连接本地音频输出：

• 固定节点串联链路（全程不连接audioCtx.destination，避免冗余的本地放音）：
  1. 把getUserMedia拿到的MediaStream作为输入，创建MediaStreamAudioSourceNode，作为整个音频图的起点
  2. 源节点连接到AudioWorkletNode，替代旧的ScriptProcessorNode，把音频处理逻辑放到独立线程，避免阻塞主线程，同时轻量实现重采样
  3. 在AudioWorklet的自定义处理逻辑中，直接逐帧读取设备返回的原始Float32单声道数据：如果采集的是双声道数据，直接取左右声道平均值合并为单声道；根据设备采样率和目标自定义采样率的比值，做线性插值的重采样，不需要引入XAudioJS这类带冗余编解码功能的外部库，几十行代码即可完成
  4. 重采样后的数据直接转换为16位PCM二进制块，调用已建立的WebSocket连接的send()方法发送，整个链路没有多余的中转节点
• 停止推流时的清理顺序固定为：
  1. 暂停发送音频二进制块（不需要断开长期维持的WebSocket连接）
  2. 断开源节点与AudioWorkletNode的连接
  3. 停止MediaStream携带的所有音频轨道
  4. 关闭AudioContext实例

常见实现提示

• WebSocket连接可以在页面加载完成后直接和自建服务端建立，不需要等点击录音按钮再创建，减少首次点击的延迟
• AudioWorklet的处理脚本可以直接内联在页面中，不需要单独引入外部文件，完全满足轻量化的要求

内容的提问来源于stack exchange，提问作者Nathanael