Recording audio with Next JS is a breeze

Question

I'm currently working on incorporating audio recording into my Next JS app and could use some guidance. I found a helpful resource at: https://blog.logrocket.com/how-to-create-video-audio-recorder-react/

At this stage, I have the following code snippet:

...
const mrRef = useRef(null);
...
mediaRecorder = new MediaRecorder(stream!, { mimeType: mimeType });
mrRef.current = mediaRecorder;

When I reach the last line of code above, Visual Studio Code displays the warning message below:

Type 'MediaRecorder' is not assignable to type 'null'.ts(2322)
(property) MutableRefObject<null>.current: null

I am unsure about what needs to be fixed in this situation. Can anyone provide clarification or guidance?

Answer 1

Answer №1

Looks like you forgot to input your reference value.

Here is a simple solution:


const mrRef = useRef<any>(null);

mediaRecorder = new MediaRecorder(stream!, { mimeType: mimeType });
mrRef.current = mediaRecorder;

It's not recommended to leave it as any, you should determine the type that MediaRecorder returns and declare your ref accordingly


const mrRef = useRef<MediaRecorderType || null>(null);

Answer 2

Looks like you forgot to input your reference value.

Here is a simple solution:


const mrRef = useRef<any>(null);

mediaRecorder = new MediaRecorder(stream!, { mimeType: mimeType });
mrRef.current = mediaRecorder;

It's not recommended to leave it as any, you should determine the type that MediaRecorder returns and declare your ref accordingly


const mrRef = useRef<MediaRecorderType || null>(null);