从 Chrome 录制的音频无法在 Safari 上播放

Question

我正在使用 React Js 构建一个应用程序，它可以录制用户的音频，将文件或 blob 上传到云存储，并从文件 URL 播放录制的音频。

问题是，当从 Chrome 录制音频时，它只能在 Chrome 上播放，而不会在 Safari 中播放。另一方面，如果音频是从 Safari 录制的，则它在两个浏览器上都可以正常播放。

测试于

• macOS 11.5.1 大苏尔
• Google Chrome 版本 94.0.4606.81（官方版本）(x86_64)
• Safari 版本 14.1.2 (16611.3.10.1.3)

这是实现。

录音部分：

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream);
recorder.addEventListener('dataavailable', ({ data }) => {
  const audioBlob = new Blob([data], { type: 'audio/mpeg' });
  // or new File([audioBlob], 'name.mp3', { type: 'audio/mpeg' });
  // upload blob or file to server
});

// on start
recorder.start();

// on stop
recorder.stop();
recorder.stream.getTracks().forEach((i) => i.stop());

回放部分；

const audioInstanceRef = useRef<HTMLAudioElement | null>(null);

useEffect(() => {
  audioInstanceRef.current = new Audio();
}, []);

const play = (url: string) => {
  if (!audioInstanceRef.current) return;

  audioInstanceRef.current.src = url;
  audioInstanceRef.current.play();
};

这些是 Safari 为获取Chrome 录制的音频而发出的请求

当我尝试玩时audio.play()，我在控制台中收到此错误消息。

当我尝试使用<audio />元素时，控制台中没有错误消息，而是stall触发了事件。

我还使用File构造函数创建了 mp3 文件并下载到 macbook。从 Safari 录制的 mp3 文件可以播放，而从 Chrome 录制的则不能播放。

Answer 1

您没有正确设置内容类型标题 -audio-mpeg不正确。Safari 对 Content-Type 标头非常挑剔。如果它们与音频文件的实际内容类型不匹配，则不会播放。

这就是我用于 mp3 文件的内容。请注意，Wav 和 Ogg 格式需要不同的标头。

音频/mpeg3;音频/x-mpeg-3;视频/mpeg;视频/x-mpeg;