How do I get the audio blob? about react-media-recorder

[DeltaCircuit]

@cameronroe You can access mediaBlob in the render function.

It's a blob url, so you may use it like:

let audio = new Audio(mediaBlob);
audio.play();  

[ninjasort]

I don't understand how to use it in render. It's rendering the jsx inline.

[DeltaCircuit]

Oh, I thought you wanted an Audio object. You can render an <audio /> in the render like this:

<ReactMediaRecorder  
  audio
  render={({ status, startRecording, stopRecording, mediaBlob }) => (
    <div>
      <p>{status}</p>
      <button onClick={startRecording}>Start Recording</button>  
      <button onClick={stopRecording}>Stop Recording</button>  
      <audio src={mediaBlob} controls />  
    </div>  
  )}  
/>  

If you're still having problems, can you post your code here? I can't really guess what's happening to you without seeing the code.

[ninjasort]

I basically had that... but I want to record the audio and then use it elsewhere in my code:

So I had:

<ReactMediaRecorder  
  audio
  render={({ status, startRecording, stopRecording, mediaBlob }) => (
    <div>
      <p>{status}</p>
      <button onClick={startRecording}>Start Recording</button>  
      <button onClick={stopRecording}>Stop Recording</button>  
      <audio src={mediaBlob} controls />  
      {this.setState({audio: new Audio(mediaBlob))}
    </div>  
  )}  
/>  

[DeltaCircuit]

You can't use setState() in render. This will lead to infinite recursion. You can wrap your entire recorder component with ReactMediaRecorder if that's what you want. That's the whole idea of render props.

I'm not quite sure about achieving this behavior with this design pattern.

[DeltaCircuit]

But I see your point. How about a whenStopped prop to ReactMediaRecorder? Which will fire once the recorder stops. The function will be invoked with the blobUrl. So, you can use it to setState() like this:

<ReactMediaRecorder  
  audio
  whenStopped={blobUrl=>this.setState({ blobUrl })}
  render={({ status, startRecording, stopRecording, mediaBlob }) => (
    <div>
      <p>{status}</p>
      <button onClick={startRecording}>Start Recording</button>  
      <button onClick={stopRecording}>Stop Recording</button>  
      <audio src={mediaBlob} controls />  
    </div>  
  )}  
/>  

Sounds good? I'll be patching this shortly.

[DeltaCircuit]

@cameronroe The patched version ( 0.7.0 ) is live in npm registry.
Do a

$> npm i react-media-recorder@latest  

and try again with whenStopped hook. Let me know / reopen this if you're still getting any issues.

Thanks!

[AmeerHamzaRiaz]

Hi, I also can't figure out how to send this audio converted from blobUrl to s3.
Also, When I do
let audio = new Audio(mediaBlob);
audio.play(); // this works
audio.duration //but this returns NaN

Thanks

[dasler-fw]

Thats how you can get blob from mediaBlobUrl or change mediaBlobUrl to blob (for searchers):

const handleSave = async () => {
    const audioBlob = await fetch(mediaBlobUrl).then((r) => r.blob());
    const audioFile = new File([audioBlob], 'voice.wav', { type: 'audio/wav' });
    const formData = new FormData(); // preparing to send to the server

    formData.append('file', audioFile);  // preparing to send to the server

    onSaveAudio(formData); // sending to the server
  };