samhirtarif / react-audio-recorder

An audio recording helper for React. Provides a component and a hook to help with audio recording.
https://www.npmjs.com/package/react-audio-voice-recorder
211 stars 64 forks source link

Safari support #97

Open juliandierker opened 1 year ago

juliandierker commented 1 year ago

is there any support for Safari < v17 ? atm this recorder only supports webm and this makes it unusable for safari users which are not on the latest > 17 version. could you please make it downwards compatible or allow to use mp3 as file format?

TijlDeclerckWd commented 11 months ago

I am having the same issue.

bhurghundii commented 1 month ago

I needed this to work on Safari for iPhone so had to fork the code and make the adjustments myself:

const startRecording: () => void = useCallback(() => {
    if (timerInterval != null) return;

    navigator.mediaDevices
      .getUserMedia({ audio: audioTrackConstraints ?? true })
      .then((stream) => {
        setIsRecording(true);
        const recorder: MediaRecorder = new MediaRecorder(
          stream,
            **{...mediaRecorderOptions, mimeType: "audio/mp4"}**
        );
        setMediaRecorder(recorder);
        recorder.start();
        _startTimer();

        recorder.addEventListener("dataavailable", (event) => {
          setRecordingBlob(event.data);
          recorder.stream.getTracks().forEach((t) => t.stop());
          setMediaRecorder(undefined);
        });
      })
      .catch((err: DOMException) => {
        console.log(err.name, err.message, err.cause);
        onNotAllowedOrFound?.(err);
      });
  }, [
    timerInterval,
    setIsRecording,
    setMediaRecorder,
    _startTimer,
    setRecordingBlob,
    onNotAllowedOrFound,
    mediaRecorderOptions,
  ]);

Explicitly setting the mediaRecorderOptions to use mimeType: "audio/mp4" seems to do the trick