HTML5 audio element fails to play audio on Safari on iOS

Question

I have a React component which plays a recorded audio (5 seconds) stored in SharePoint document library. If I record an audio using desktop browser, it plays well on desktop browser but fails to play on Safari on iOS. Error thrown on Safari is - "Unhandled Promise Rejection: NotSupportedError: The operation is not supported". When recorded using Safari on iOS, it plays on both. I searched a lot but could not find a solution. Following is excerpt from my actual component code.

Note: I am not posting code to record the audio. It works just fine on both browsers. Issue is in playing on Safari on iOS.

`export const AudioPronunciation: FC = (props) => {
  const audioPlayer = useRef(null);
  const [audioRecording, setAudioRecording] = useState(null);

  useEffect(() => {
    const getRecordingBlob = async (): Promise<void> => {
      //get user recording file blob from SharePoint document library
      //fileBlobFromSharePoint
      const audioBlob: Blob = new Blob([fileBlobFromSharePoint], { type: audio/mpeg; codecs=opus });
      const audioUrl: string = window.URL.createObjectURL(audioBlob);
      setAudioRecording(audioUrl);
    }
  }, []);
  
  const listenRecording = (): void => {    
    audioPlayer.current.play();
  };

  return (
    <div className={styles.audioPronunciation}>
      <div className={styles.speechIcon}>
        <audio ref={audioPlayer}>
          <source src={audioRecording} type="audio/mpeg" />
          <source src={audioRecording} type="audio/ogg" />
          <p>Your browser does not support the HTML audio element.</p>
        </audio>
        <Icon iconName='Volume2' onClick={() => listenRecording()} className={styles.speechIcon} />
      </div>
    </div>
  );
};`

I expect recorded audio to be played on both desktop browser and Safari on iOS.