react-mic record audio and send the blob as mp3/wav to backend

user_11052499 0
Viewed 1491

Basically I want to record audio and I'm using react-mic for this but it gives back blob but I want mp3 or wav file to send to the backend. How to POST blob file to the server?

This is my code in App.js

import React from "react";
import { ReactMic } from "react-mic";
import $ from "jquery";
import { findDOMNode } from "react-dom";
import "./App.css";

class App extends React.Component {
  handleDisplayForStart = () => {
    const startBtn = findDOMNode(this.refs.startBtn);
    $(startBtn).addClass("d-none");
    const stopBtn = findDOMNode(this.refs.stopBtn);
    $(stopBtn).removeClass("d-none");
  };

  handleDisplayForStop = () => {
    const stopBtn = findDOMNode(this.refs.stopBtn);
    $(stopBtn).addClass("d-none");
    const processBtn = findDOMNode(this.refs.processBtn);
    $(processBtn).removeClass("d-none");
  };

  constructor(props) {
    super(props);
    this.state = {
      blobURL: null,
      recordedBlob: null,
      record: false,
    };
  }

  startRecording = () => {
    this.setState({ record: true });
    this.handleDisplayForStart();
  };

  stopRecording = () => {
    this.setState({ record: false });
    this.handleDisplayForStop();
  };

  onData(recordedBlob) {
    console.log("chunk of real-time data is: ", recordedBlob);
  }

  onStop = (recordedBlob) => {
    console.log(recordedBlob.blobURL);
    const blobURL = recordedBlob.blobURL;
    this.setState({ blobURL: blobURL });
    this.onUpload();
    return recordedBlob.blobURL;
  };

  onUpload = (recordedBlob) => {
    // var form = new FormData();
    // form.append("file", recordedBlob);
    // fetch("http://localhost:3000/audio", {
    //   // content-type header should not be specified!
    //   method: "POST",
    //   body: form,
    // })
    //   .then(function (response) {
    //     return response.text();
    //   })
    //   .then(function (text) {
    //     console.log(text); // The text the endpoint returns
    //   })
    //   .catch((error) => console.log(error));
  };

  render() {
    return (
      <div className="App">
        <ReactMic
          visualSetting="frequencyBars"
          // mimeType='audio/mp3'
          record={this.state.record}
          className="d-none"
          onStop={this.onStop}
          onData={this.onData}
        />
        <button
          ref="startBtn"
          className="start-btn"
          onClick={this.startRecording}
          type="button"
        >
          START
        </button>
        <button
          ref="stopBtn"
          className="stop-btn concentric-circles d-none"
          onClick={this.stopRecording}
          type="button"
        >
          STOP
        </button>
        <button
          ref="processBtn"
          className="process-btn d-none"
          onClick={this.onUpload}
        >
          Processing..
        </button>
        <br />
        <audio src={this.state.blobURL} controls />
      </div>
    );
  }
}

export default App;

I tried various things from medium blogs and different StackOverflow answers but anything doesn't work correctly.

reactjs
1 Answers

This may be a bit late, i also came across this problem and i also couldn't find a solution, sharing the solution so it may help others.

code for sending recorded blob file using react-mic to server,

const onStop = (blob) => {
    const formData = new FormData();
    // if you print blob in console you may get details of this obj
    let blobWithProp = new Blob([blob["blob"]], blob["options"]);

    formData.append("file", blobWithProp);

    const postRequest = {
      method: "POST",
      body: formData,
    };
    fetch("http://127.0.0.1:5000/audio_out/", postRequest)
      .then(async (res) => {
        const data = await res.json();
        console.log(data);
        if (!res.ok) {
          const err = (data && data.message) || res.status;
          return Promise.reject(err);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

Here onStop() is the callback function which is executed when recording stopped.

On your commented part of your code you are sending recorded blob file directly. I don't know much about it, but if you log the received file on console you may see it is an object file containing blob, options, etc. So, I think we need to create a new Blob file from that. I am just a beginner in web development, may be i am wrong. But the above code solved the problem.

user_155753340
Related