React按序播放Socket传输音频块：Safari与FireFox解码失败

我需要通过Socket连接从后端向前端传输音频块，并按顺序播放。以下是我的React代码：

function SampleComponent() {
  const socketInstanceRef = useRef<Socket | null>(null);
  const audioContextRef = useRef<AudioContext | null>(null);
  const audioChunkQueueRef = useRef<Buffer[]>([]);
  const isPlayingRef = useRef<boolean>(false);

  useEffect(() => {
    (async () => {
      audioContextRef.current = new window.AudioContext({
        latencyHint: "playback",
      });

      // ...socket connection initialization

      socketInstanceRef.current.on("audio-chunks", async (chunk) => {
        audioChunkQueueRef.current.push(chunk);
        if (!isPlayingRef.current) {
          playNextChunk();
        }
      });

      const playNextChunk = async () => {
        isPlayingRef.current = true;
        const chunk = audioChunkQueueRef.current.shift();
        try {
          const audioBuffer = await audioContextRef.current!.decodeAudioData(
            chunk!
          );
          const source = audioContextRef.current!.createBufferSource();
          source.buffer = audioBuffer;
          source.connect(audioContextRef.current!.destination);
          source.start();
          source.onended = () => {
            isPlayingRef.current = false;
            playNextChunk();
          };
        } catch (error) {
          console.log(error);
        }
      };
    })();
  }, []);

  return (
   <div>Example</div>
  );
}

export default SampleComponent;

代码在Chrome中运行正常，但在Safari和FireFox中报错：

FireFox：DOMException: The buffer passed to decodeAudioData contains an unknown content type.
Safari：EncodingError: Decoding failed

奇怪的是，两款浏览器均能成功播放首个音频块，但后续块解码失败。我已尝试将后端音频格式从mp3改为aac、flac传输，问题仍未解决。求解决思路？

解决思路 #

• 确保每个音频块是完整可解码单元：decodeAudioData需要完整的音频帧或包含格式头的完整数据块，不能随意切割二进制流。后端必须按音频帧的自然边界分割数据（比如MP3的帧长度由比特率和采样率计算，AAC的ADTS帧有固定头部标识），避免破坏帧结构。

• 补充格式头信息：首块能解码可能因为包含了完整的文件格式头（如MP3的ID3、AAC的ADTS头），但后续块只有纯帧数据。可以让后端给每个音频块都带上对应的格式头，或者前端在解码前给每个后续块拼接固定的格式头（比如AAC的ADTS头结构是固定的，可根据参数生成）。

• 改用流式音频处理方案：decodeAudioData并非为流式传输设计，更适合处理完整音频文件。可以使用Web Audio的AudioWorklet（现代浏览器推荐）或旧版的ScriptProcessorNode，手动解析接收到的音频帧，将PCM数据直接填充到AudioBuffer中播放，绕过格式解码的兼容性问题。

• 校验传输数据完整性：检查Socket传输的二进制数据是否在前后端一致，比如打印每个块的字节长度、哈希值，排除传输中数据丢失或编码错误的情况（比如某些Socket库默认将二进制转成UTF-8字符串，导致字节损坏）。

• 尝试MediaSource API：如果是流媒体播放场景，MediaSource API更适配连续块的拼接和解码。创建MediaSource对象，通过SourceBuffer逐块append音频数据，绑定到audio元素播放，这种方式的浏览器兼容性更好，无需手动处理解码逻辑。

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