React.js FFMPEG WASM Project to Build Audio Recorder From Microphone Using vmsg Library in JS

Welcome folks today in this blog post we will be building an audio recorder from microphone using vmsg library & ffmpeg wasm library. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js project using the below command as shown below

npx create-react-app sampleapp

cd sampleapp

Now we need to install the below library using the below command as shown below

npm i vmsg

And after that you will see the below directory structure of the react.js app as shown below

Now you need to edit the index.js file and copy paste the following code

index.js

import React from "react";
import { render } from "react-dom";
import vmsg from "vmsg";
import "./App.css";

const recorder = new vmsg.Recorder({
  wasmURL: "https://unpkg.com/vmsg@0.3.0/vmsg.wasm"
});

class App extends React.Component {
  state = {
    isLoading: false,
    isRecording: false,
    recordings: []
  };
  record = async () => {
    this.setState({ isLoading: true });

    if (this.state.isRecording) {
      const blob = await recorder.stopRecording();
      this.setState({
        isLoading: false,
        isRecording: false,
        recordings: this.state.recordings.concat(URL.createObjectURL(blob))
      });
    } else {
      try {
        await recorder.initAudio();
        await recorder.initWorker();
        recorder.startRecording();
        this.setState({ isLoading: false, isRecording: true });
      } catch (e) {
        console.error(e);
        this.setState({ isLoading: false });
      }
    }
  };
  render() {
    const { isLoading, isRecording, recordings } = this.state;
    return (
      <React.Fragment>
        <button disabled={isLoading} onClick={this.record}>
          {isRecording ? "Stop" : "Record"}
        </button>
        <ul style={{ listStyle: "none", padding: 0 }}>
          {recordings.map(url => (
            <li key={url}>
              <audio src={url} controls />
            </li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}

render(<App />, document.getElementById("root"));

import React from "react";

import { render } from "react-dom";

import vmsg from "vmsg";

import "./App.css";

const recorder = new vmsg.Recorder({

wasmURL: "https://unpkg.com/vmsg@0.3.0/vmsg.wasm"

});

class App extends React.Component {

state = {

isLoading: false,

isRecording: false,

recordings: []

};

record = async () => {

this.setState({ isLoading: true });

if (this.state.isRecording) {

const blob = await recorder.stopRecording();

this.setState({

isLoading: false,

isRecording: false,

recordings: this.state.recordings.concat(URL.createObjectURL(blob))

});

} else {

try {

await recorder.initAudio();

await recorder.initWorker();

recorder.startRecording();

this.setState({ isLoading: false, isRecording: true });

} catch (e) {

console.error(e);

this.setState({ isLoading: false });

}

};

render() {

const { isLoading, isRecording, recordings } = this.state;

return (

<React.Fragment>

{isRecording ? "Stop" : "Record"}

</button>

{recordings.map(url => (

</li>

))}

</ul>

</React.Fragment>

);

}

render(<App />, document.getElementById("root"));

As you can see we are recording the audio from the user microphone and after that we are downloading the audio as wav file as an attachment inside the browser. For this we are using the blob data url