Capture webm chunks into a Blob
MediaRecorder does not hand you a single audio file when recording stops. It emits Blob chunks via ondataavailable while recording, and fires onstop when the user finishes. Your job is to collect the chunks and merge them into one Blob.
From chunks to a single Blob
MediaRecorder events fire across the recording lifecycle.
mediaRecorderRef.current.ondataavailable = (e: BlobEvent) => {
chunksRef.current.push(e.data);
};
mediaRecorderRef.current.onstop = async () => {
const blob = new Blob(chunksRef.current, { type: 'audio/webm' });
await uploadAudio(blob);
stream.getTracks().forEach((track) => track.stop());
};
mediaRecorderRef.current.start();ondataavailable pushes each chunk into a ref array. onstop merges all chunks into a Blob with the right MIME type, uploads it, and shuts off the microphone by stopping every track on the stream.
If you skip this step, the browser keeps the microphone live and shows the recording indicator in the tab. Users notice, and they stop trusting your app. Stopping every track releases the microphone and removes the indicator immediately.
Quiz: Quiz
Loading practice…