如何保存MediaStream以实现录后音频音高检测分析？

解答 #

针对主要问题的解决方案

你不需要依赖<audio>元素的播放和captureStream()来分析音频，直接处理Blob数据会更高效，还能避免静音的问题：

1. 将Blob转换为ArrayBuffer：利用FileReader读取Blob，拿到原始音频数据

   const reader = new FileReader();
   reader.onload = async function(e) {
     const arrayBuffer = e.target.result;
     // 下一步处理ArrayBuffer
   };
   reader.readAsArrayBuffer(blob);
   

2. 使用AudioContext解码音频：把ArrayBuffer解码成AudioBuffer，这是可以直接用于分析的音频数据容器

   const audioContext = new AudioContext();
   const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
   

3. 将AudioBuffer转换为MediaStream（适配现有模型）：通过AudioBufferSourceNode和MediaStreamDestination创建无输出的流

   const source = audioContext.createBufferSource();
   source.buffer = audioBuffer;
   const destination = audioContext.createMediaStreamDestination();
   source.connect(destination);
   // 此stream无音频输出，可直接传入检测器
   const silentStream = destination.stream;
   source.start();
   

如果坚持要用<audio>元素，也可以绕开muted属性的问题：将元素音量设为0，同时隐藏元素并保持播放状态，这样captureStream()就能正常工作：

AUDIOSAVE.volume = 0;
AUDIOSAVE.style.display = 'none';
AUDIOSAVE.play();
const stream = AUDIOSAVE.captureStream();

针对次要问题的解答

• MediaStream的本质：它是媒体轨道（MediaStreamTrack）的集合，每个轨道对应一段连续的媒体数据（音频/视频）。所谓“连续”是指轨道会持续生成数据，直到被主动停止。
• 返回后可直接使用的原因：captureStream()返回的MediaStream已经和<audio>元素的播放逻辑绑定，当元素开始播放时，轨道会自动持续输出数据。接收流的API（比如你的音高检测器）会监听轨道的数据事件，一旦有数据产生就会处理，不需要额外等待“准备完成”的信号。
• 简单来说，MediaStream是异步数据的容器，API使用它时会自动处理数据的到来，所以你拿到它后可以直接传递，无需额外操作。

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