How to use mediarecorder and mediastream with next.js?

See more:

next.js

This is one problem I am facing while developing an small web app with Next.JS.

The app allows the user to record his own voice and then play it back. Although it works up to a point, it has a serious issue. At this stage, I can do the audio recording as well as play the audio back once. But it starts getting into trouble if I want to play back multiple times. I am likely making some basic mistake in my code, but have no idea where. If somebody sees something missing, please let me know.

This is the kind of error message I get, when trying to play more than once:

Unhandled Runtime Error (Uncaught (in promise))
AbortError(DOMException):
The fetching process for the media resource was aborted by the user agent at the user's request.

Now, below is the complete code for the Next.JS component.

And since this is the unique component I am using, it is easy to make a bare-bone next.js app and use this component to test what happens.

If more detailed information is needed, let me know in the comments.

What I have tried:

'use client'

import {useState,useRef} from "react";

const AudioRecorderPlayer = () => {
  const [permission, setPermission] = useState(false);
  const [stream, setStream] = useState<MediaStream>();
  const [recordingStatus, setRecordingStatus] = useState("inactive");
  const mrRef = useRef<MediaRecorder | null>(null);
  const audioChunksRef = useRef<Blob[]>([]);
  const [audio, setAudio] = useState('');
  const dataType = "video/webm";

  const getMicrophonePermission = async () => {
    if ("MediaRecorder" in window) {
      try {
        const streamData = await navigator.mediaDevices.getUserMedia({
            audio: true,
            video: false,
        });
        setPermission(true);
        setStream(streamData);
      } catch (err) {
        alert("err.message");
      }
    } else {
      alert("The MediaRecorder API is not supported in your browser.");
    }
  }; /* End of getMicrophonePermission */

  const startRecording = async () => {
        mrRef.current = null
        audioChunksRef.current = []

        setRecordingStatus("recording");
        const mediaRecorder = new MediaRecorder(stream!, {
            mimeType: dataType,
            audioBitsPerSecond: 16*44100
        });
        mrRef.current = mediaRecorder;

        let localAudioChunks = [];//[Blob];
        mediaRecorder.start()
        mediaRecorder.ondataavailable = (event) => {
            if (typeof event.data === "undefined") return;
            if (event.data.size === 0) return;
            localAudioChunks.push(event.data);
            audioChunksRef.current.push(event.data);
        };
    }; /* End of startRecording */

    const stopRecording = () => {
        setRecordingStatus("inactive");
        if (!mrRef.current) return
        mrRef.current?.stop();
        mrRef.current.onstop = async () => {
            console.log("Here dataType = ",dataType)
            const audioBlob = new Blob(audioChunksRef.current,
                 {
                    type: dataType});
            const audioUrl = URL.createObjectURL(audioBlob);
            setAudio(audioUrl);
        };
    }; /* End of stopRecording */

  return (
    <div>
      <main>
                {!permission ? (
                    <button onClick=
                      {getMicrophonePermission} type="button">
                        Get Microphone
                    </button>
                ): null}
                {permission &&
                 recordingStatus === "inactive" ? (
          <button onClick={startRecording} type="button">
            Start Recording
                    </button>
                ) : null}
                {recordingStatus === "recording" ? (
            <button onClick={stopRecording} type="button">
                        Stop Recording
                    </button>
                ) : null}
        <audio src={audio} id="audio-player" controls />
      </main>
    </div>
  );

}; /* End of AudioRecorderPlayer */

export default AudioRecorderPlayer;