Using recordingBlob about react-audio-recorder HOT 1 CLOSED

'use client';

import * as React from 'react';
import { useState, useEffect } from 'react';
import { AudioRecorder, useAudioRecorder } from 'react-audio-voice-recorder';

export default function Uploadhftwo() {
    const [blobby, setBlobby] = useState(null);

  const recorderControls = useAudioRecorder(
    {
      noiseSuppression: true,
      echoCancellation: true,
    },
    (err) => console.table(err) // onNotAllowedOrFound
  );
  const addAudioElement = (blob) => {
    const url = URL.createObjectURL(blob);
    const audio = document.createElement('audio');
    audio.src = url;
    audio.controls = true;
    document.body.appendChild(audio);
  };

  const {
    startRecording,
    stopRecording,
    togglePauseResume,
    recordingBlob,
    isRecording,
    isPaused,
    recordingTime,
    } = useAudioRecorder();

    

     const handleSave = () => {
        recorderControls.stopRecording();
    
        };


    useEffect(() => {
        if (!recorderControls.recordingBlob)
        return

        setBlobby(recorderControls.recordingBlob)
        console.log("recordingBlob", blobby)
    }, [recorderControls.recordingBlob])

    
  return (
    <div>
      <AudioRecorder
        onRecordingComplete={(blob) => addAudioElement(blob)}
        recorderControls={recorderControls}
    
        // downloadOnSavePress={true}
        // downloadFileExtension="mp3"
        showVisualizer={true}
      />
      <br />
      {/* <button onClick={recorderControls.stopRecording}>Stop recording</button> */}
      <hr />
      <button onClick={handleSave}>Save</button>
      <br />
    </div>
  );
}