https://github.com/opensooq/react-mic-record

Record a user's voice and display as an oscillation. Works via the HTML5 MediaRecorder API (currently only available in Chrome & Firefox).
https://github.com/opensooq/react-mic-record

audio pwa react voice

Last synced: 3 months ago
JSON representation

Record a user's voice and display as an oscillation. Works via the HTML5 MediaRecorder API (currently only available in Chrome & Firefox).

• Host: GitHub
• URL: https://github.com/opensooq/react-mic-record
• Owner: OpenSooq
• Created: 2018-05-20T08:45:45.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-09T07:17:39.000Z (over 5 years ago)
• Last Synced: 2024-11-10T04:57:02.090Z (3 months ago)
• Topics: audio, pwa, react, voice
• Language: JavaScript
• Homepage:
• Size: 380 KB
• Stars: 13
• Watchers: 13
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-mic-record #

Record a user's voice and display as an osscilation. Audio is saved as WebM audio file format.

Works via the HTML5 MediaRecorder API ([currently only available in Chrome & Firefox](https://caniuse.com/#search=MediaRecorder)).

## Demo ##

Check out the demo.

## Installation ##

`npm install --save react-mic-record`

## Features ##

- Record audio from microphone

- Display sound wave as voice is being recorded

- Get audio as BLOB

## Usage ##

```js

 false.  Set to true to begin recording

  className={string}       // provide css class name

  onData={function}        // callback to execute when chunk of audio data is available

  onStop={function}        // callback to execute when audio stops recording

  strokeColor={string}     // sound wave color

  backgroundColor={string} // background color

/>

```

## Example ##

![react-mic-record Demo](gif-demo.gif)

```js

import ReactMicRecord from 'react-mic-record';

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 (

      


        

        Start

        Stop

      

    );

  }

}

```


## Credits ##

This package uses code from ([react-mic](https://github.com/hackingbeauty/react-mic)).

## License ##

Apache 2.0