@matuschek/react-mic

Wrapper component for react-mic

What's new - @matuschek/react-mic

Fixed the on data available callbacks Updated to current react mic version

What's new - @cleandersonlobo/react-mic

The Component audio format is supported in Safari browsers (including Safari on iOS).

The Package has been updated to use the MediaStreamRecorder to record WAV audio.

The Package has been updated to use the wasm-optimized vmsg to record MP3 audio.

• Supports WAV audio recording
• Supports MP3 audio recording

Problem to be solved.

• Audio recorded in WAV by safari presents noises;

Demos react-mic

Check out the demo.

NOTE: The above demo does not use this package

Installation

npm install --save @matuschek/react-mic

Features

• Record audio from microphone
• Display sound wave as voice is being recorded
• Save audio as BLOB

Usage

<ReactMic
  record={boolean}         // defaults -> false.  Set to true to begin recording
  pause={boolean}          // defaults -> false (available in React-Mic-Gold)
  visualSetting="sinewave" // defaults -> "sinewave".  Other option is "frequencyBars"
  className={string}       // provide css class name
  onStop={function}        // required - called when audio stops recording
  onData={function}        // optional - called when chunk of audio data is available
  onBlock={function}       // optional - called if user selected "block" when prompted to allow microphone access (available in React-Mic-Gold)
  strokeColor={string}     // sinewave or frequency bar color
  backgroundColor={string} // background color
  mimeType="audio/webm"     // defaults -> "audio/webm".  Set to "audio/wav" for WAV or "audio/mp3" for MP3 audio format (available in React-Mic-Gold)
  echoCancellation={boolean} // defaults -> false
  autoGainControl={boolean}  // defaults -> false
  noiseSuppression={boolean} // defaults -> false
  channelCount={number}     // defaults -> 2 (stereo).  Specify 1 for mono.
  mimeType={string}        // defaults -> audio/wav. Set audio/mp3 to switch to MP3
  bufferSize={number}      // defaults -> 2048. You can set following bufferSize values: 0, 256, 512, 1024, 2048, 4096, 8192, and 16384. 
  sampleRate={number}      // defaults -> 44100. It accepts values only in range: 22050 to 96000 
/>

Example

AUDIO/WAV

import { ReactMic } from 'react-mic';

export class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      record: false
    }
  }

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

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

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

  onStop(recordedBlob) {
    console.log('recordedBlob is: ', recordedBlob);
  }

  render() {
    return (
      <div>
        <ReactMic
          record={this.state.record}
          className="sound-wave"
          onStop={this.onStop}
          onData={this.onData}
          strokeColor="#000000"
          backgroundColor="#FF4081" />
        <button onTouchTap={this.startRecording} type="button">Start</button>
        <button onTouchTap={this.stopRecording} type="button">Stop</button>
      </div>
    );
  }
}

AUDIO/MP3

import { ReactMic } from 'react-mic';

export class Example extends React.Component {
  ...

  onData() {
    console.log('This function does not return an object, but is called at a time interval of 10ms');
  }

  onStop(recordedBlob) {
    console.log('recordedBlob is: ', recordedBlob);
  }

  render() {
    return (
      <div>
        <ReactMic
          record={this.state.record}
          className="sound-wave"
          onStop={this.onStop}
          onData={this.onData}
          strokeColor="#000000"
          backgroundColor="#FF4081" 
          mimeType="audio/mp3" />
        <button onTouchTap={this.startRecording} type="button">Start</button>
        <button onTouchTap={this.stopRecording} type="button">Stop</button>
      </div>
    );
  }
}

License

MIT