Audio recorded from Chrome doesn't play on Safari

Question

I'm building an app using React Js where it can record audio from users, upload the file or blob to cloud storage, and play the recorded audio from the file URL.

The issue is when the audio is recorded from Chrome, it only plays on Chrome but doesn't play in Safari. On other hand, if the audio is recorded from Safari, it plays just fine on both browsers.

Tested on

• macOS 11.5.1 Big Sur
• Google Chrome Version 94.0.4606.81 (Official Build) (x86_64)
• Safari Version 14.1.2 (16611.3.10.1.3)

Here is the implementation.

Recording part:

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());

Playback part;

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();
};

These were the requests Safari made to get the audio recorded from Chrome

When I tried to play with audio.play(), I've got this error message in console.

When I tried to play with <audio /> element, there was no error message in console but instead stall event was fired.

I've also created mp3 file using File contructor and downloaded to macbook. The mp3 file recorded from Safari was playable, where as the one recorded from Chrome was not.