如何从WebRTC流提取音频生成.wav并计算FFT获得傅里叶频谱

可行解决方案 #

首先纠正一个认知误区：不需要先导出为.wav格式再做FFT分析，使用Web Audio API可以直接从WebRTC流中提取实时音频数据计算傅里叶频谱，且完全不影响原音视频流用于其他用途。

步骤1：正确获取WebRTC流中的音频轨道 #

调用getAudioTracks()报错大概率是调用时机过早，WebRTC远程流需要等待track事件触发后再读取轨道，本地流要等待媒体采集接口异步返回后再操作，正确调用示例：

// 远程WebRTC流场景：监听peerConnection的track事件
let rtcStream = null;
peerConnection.addEventListener('track', (event) => {
  if (!rtcStream) rtcStream = new MediaStream();
  rtcStream.addTrack(event.track);
  // 确认有音频轨道后再调用getAudioTracks
  if (event.track.kind === 'audio') {
    const audioTracks = rtcStream.getAudioTracks();
    console.log('获取到的音频轨道数量:', audioTracks.length);
    // 此时拿到的轨道可正常使用
    initAudioAnalyser(rtcStream);
  }
});

// 原音视频流可正常赋值给播放组件，和音频分析逻辑完全不冲突
yourVideoElement.srcObject = rtcStream;

步骤2：用Web Audio API实现实时FFT频谱计算 #

直接通过MediaStreamAudioSourceNode接入音频流，用AnalyserNode原生实现FFT计算，不需要额外依赖：

let audioContext, analyser, dataArray;
function initAudioAnalyser(stream) {
  // 初始化音频上下文，注意需要在用户交互事件（比如点击）后创建避免浏览器自动拦截
  audioContext = new (window.AudioContext || window.webkitAudioContext)();
  // 从流创建音频源节点
  const source = audioContext.createMediaStreamSource(stream);
  // 创建分析节点
  analyser = audioContext.createAnalyser();
  // 设置FFT大小，必须是2的幂，数值越大频率分辨率越高、实时性越低
  analyser.fftSize = 2048;
  // 获取频率数据的数组长度
  const bufferLength = analyser.frequencyBinCount;
  dataArray = new Uint8Array(bufferLength);
  // 连接节点：源 -> 分析器，不需要播放音频就不用连接到音频输出
  source.connect(analyser);
  
  // 循环读取FFT数据
  function getFFTData() {
    requestAnimationFrame(getFFTData);
    // 获取频率域数据
    analyser.getByteFrequencyData(dataArray);
    // 这里的dataArray就是你需要的傅里叶频谱数据，直接用来绘制蜜蜂嗡嗡声的频谱即可
    console.log('当前频谱数据:', dataArray);
  }
  getFFTData();
}

录制后处理方案 #

如果你需要先录制再做FFT分析，不需要导出wav再解码，可以选择两种实现方式：

• 用MediaRecorder录制时，监听ondataavailable事件拿到的blob数据，可以直接用FileReader读取为ArrayBuffer，再用AudioContext.decodeAudioData解码为音频缓冲区后计算FFT
• 也可以在录制前通过上述的AnalyserNode提前把频谱数据存下来，录制结束后直接用缓存的频谱数据生成可视化结果，不需要二次解码

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