Giter VIP home page Giter VIP logo

eliranmoyal / react-voice-recorder Goto Github PK

View Code? Open in Web Editor NEW

This project forked from sivaprakashdesingu/react-voice-recorder

0.0 1.0 0.0 2.54 MB

This (react-voice-recorder) is a JavaScript library for React Applicaiton which will be used to record voice as audio and download the same.

Home Page: https://codesandbox.io/s/react-voice-recorder-mydov?file=/src/App.js

License: MIT License

JavaScript 64.75% CSS 26.87% HTML 8.38%

react-voice-recorder's Introduction

NPM

react-voice-recorder

This (react-voice-recorder) is a JavaScript library for React Applicaiton which will be used to record voice as audio and download the same.

Demo

Checkout the Demo

Installation

npm i react-voice-recorder //This will download the latest version of Module.

Import in your project file

import {Recorder} from 'react-voice-recorder'
import 'react-voice-recorder/dist/index.css'

Declare inside the render menthod

this.state = {
    audioDetails: {
        url: null,
        blob: null,
        chunks: null,
        duration: {
          h: 0,
          m: 0,
          s: 0
        }
      }
}
handleAudioStop(data){
    console.log(data)
    this.setState({ audioDetails: data });
}

handleAudioUpload(file) {
    console.log(file);
}

handleCountDown(data) {
    console.log(data);
}

handleReset() {
    const reset = {
      url: null,
      blob: null,
      chunks: null,
      duration: {
        h: 0,
        m: 0,
        s: 0
      }
    };
    this.setState({ audioDetails: reset });
  }

<Recorder
    record={true}
    title={"New recording"}
    audioURL={this.state.audioDetails.url}
    showUIAudio
    handleAudioStop={data => this.handleAudioStop(data)}
    handleAudioUpload={data => this.handleAudioUpload(data)}
    handleCountDown={data => this.handleCountDown(data)}
    handleReset={() => this.handleReset()}
    mimeTypeToUseWhenRecording={`audio/webm`} // For specific mimetype.
/>

Props

Common props you may want to specify include:

  • record - Flag
  • title - Title for the Model
  • hideHeader - To hide the header which showing title
  • audioURL - To hear what has been recorded.
  • showUIAudio - Either need to show HTML5 audio tag after stopped or not.
  • handleAudioStop - Once your are stop the record, this will send your the data to process. further
  • handleAudioUpload - Onced click the upload button, Blob will be passed via props
  • handleCountDown - Transmits time every 100 milliseconds
  • uploadButtonDisabled (optional) - When set to true, the upload button is disabled
  • mimeTypeToUseWhenRecording (optional) - Specify the MIME type you want to use when recording. If none specified, the browser's default will be used.
    • audio/ogg for Firefox
    • audio/webm for Chrome

License

MIT Licensed.

react-voice-recorder's People

Contributors

sivaprakashdesingu avatar ozdemiremrah avatar taha-moghaddam avatar dependabot[bot] avatar guftall avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.