1.1.4 • Published 6 years ago

react-simple-recorder v1.1.4

Weekly downloads
1
License
MIT
Repository
github
Last release
6 years ago

react-simple-recorder

Simple React component package for Record Audio

Installation

npm install react-simple-recorder
yarn add react-simple-recorder

Example

import React from 'react';
import createRecorder from 'react-simple-recorder';

const Recorder = createRecorder(React);

function App() {
  return (
    <div>
      <Recorder
        containerClassName="my-recorder-container"
        Stop={<div>stop!</div>}
        Play={<p>play!</p>}
        Pause={<button>pause!</button>}
        Record={<div>record!</div>}
        Send={<div>send!</div>}
        onSend={(blobUrl, blob) => {
          alert('check console!');
          console.log('blob : ', blob);
          console.log('blobUrl : ', blobUrl);
        }}
      />
    </div>
  );
}

Example ( use blobUrl with audio tag )

import React, { useState } from 'react';
import createRecorder from 'react-simple-recorder';

const Recorder = createRecorder(React);

function App() {
  const [blobUrl, setBlobUrl] = useState(null);

  return (
    <div>
      <Recorder
        containerClassName="my-recorder-container"
        Stop={<div>stop!</div>}
        Play={<p>play!</p>}
        Pause={<button>pause!</button>}
        Record={<div>record!</div>}
        Send={<div>send!</div>}
        onSend={(blobUrl, blob) => {
          alert('check console!');
          console.log('blob : ', blob);
          console.log('blobUrl : ', blobUrl);
          setBlobUrl(blobUrl);
        }}
      />
      <div>
        {blobUrl ? (
          <audio controls>
            <source src={blobUrl}></source>
          </audio>
        ) : (
          <div>blobUrl(audio) not exist</div>
        )}
      </div>
    </div>
  );
}

Example ( with className )

import React from 'react';
import createRecorder from 'react-simple-recorder';

const Recorder = createRecorder(React);

function App() {
  return (
    <div>
      <Recorder
        containerClassName="w"
        Stop={<div className="myStop">stop!</div>}
        Play={<div className="myPlay">play!</div>}
        Pause={<div className="myPause">pause!</div>}
        Record={<div className="myRecord">record!</div>}
        Send={
          <div className="mySend" addactiveclass="sendActive" adddisabledclass="sendDisabled">
            send!
          </div>
        }
        onSend={(blobUrl, blob) => {
          alert('check console!');
          console.log('blob : ', blob);
          console.log('blobUrl : ', blobUrl);
        }}
      />
    </div>
  );
}

Props

NameTypearguments
containerClassNamestring
StopReact.ReactNode
PlayReact.ReactNode
PauseReact.ReactNode
RecordReact.ReactNode
SendReact.ReactNode
onSendcallback Func(blobUrl, blob)

Contributing

Contributions, questions and pull requests are all welcomed.

License

Copyright (c) 2019. Bpeak Licensed with The MIT License (MIT)

1.1.4

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago