How to Obtain the actual speech blob file? about react-mic

[hackingbeauty]

@daas-ankur-shukla,

You need to pass a callback to the onStop prop of React-Mic. Like this:

onStopCallback(recordedBlob) {
  /* Do something with recordedBlob here */
}

<ReactMic
  record={this.state.record}
  onStop={this.onStopCallback} />

The callback will receive one argument when the user stops recording which is the recorded BLOB. This BLOB is what you send to your API endpoint for processing.

[fridaland]

@hackingbeauty And it's all back to normal! Thanks a bunch!

[trops]

I found the blob to have no data in it except for the type, etc.

I had to use a different piece of code to get the data of the actual audio file and still testing this now.

var reader = new FileReader();
          reader.onload = function(event) {
            var fd = {};
            fd["fname"] = "test.wav";
            fd["data"] = event.target.result;
            callback(fd);
          };
          reader.readAsDataURL(audioBlob);

I was sending my data to an endpoint that uploads to S3, and it fails using just the blob. When I convert the data as shown above, it creates the file.

I am now trying to figure out the format which looks like audio/webm based on the file data that gets generated. I really like the library, just spending hours after I recorded trying to figure out how to USE the recording and any details about it.

[thisisashukla]

@trops hi. with whatever little experience i have had with this component. I got the data in the blob as mentioned by @hackingbeauty in his comment. My issue however was about the format in which the blob was generated. It will always be generated in the default format.

[trops]

I haven't been able to. I am uploading to my endpoint then my endpoint handles the upload to S3, I think that is the issue. So I am still left with corrupt audio files for whatever reason. Really wish there was a straightforward way of saving the files.

Edit: Turns out it works if you upload DIRECT to s3 using the AWS S3 SDK and not using a proxy endpoint like I was using. I still haven't figured that one out yet, but for my purposes I don't need to worry about it for now, but would be curious how it works to send the raw data to an endpoint and that endpoint upload it to S3...

var params = { 
        Body: <audioBlob>,
        Bucket: '<BUCKET_NAME>', 
        Key: <filename>,
        ContentType: 'audio/wav',
      };
      return new Promise(function(resolve, reject) {
        s3.putObject(params, function(err, data) {
          if(err) {
            console.log(err); 
            return reject(err);
          } else {
            console.log(data);
            return resolve(data);
          }
        });
      });

[akigmm]

@hackingbeauty When we call the API from index.js the onStop prop has to be added inside the render which is giving the error of cannot change the transition because of which the callback is never happening

[fridaland]

Any Idea why the sound wave stroke line only works the first recording? Still records, but I have to refresh to actually see the sound wave again. Any advice?

[hackingbeauty]

@free2580 this problem was already fixed. Please update your version of React-Mic to the latest version, and let me know if everything works for you as expected.

[fridaland]

@hackingbeauty I have latest version ([email protected]), no change

[hackingbeauty]

@free2580 good catch. Can you upgrade to [email protected] and verify that it works for you? I just pushed a patch.

[Alina03]

@hackingbeauty How can we send the recorded audio to the flask api and then store it to mysql?

[hackingbeauty]

@Alina03 Yes, you can do whatever you want with the audio.

[Alina03]

My question was how can we send the recorded audio to the flask api?