react-nextjs-record

Introduction

This is a package supporting react framework which is used to record voice & deal with logical issues in recording process

🚀 Demo

Demo

✨ Guideline

import React from 'react';
import { 
  ShowRecord, //component used to show audio result
  ProcessRecord //component contains state to deal with logic when recording
} from 'react-record-audio';

export default function App(props) {
  const classes = useStyles();
  const progressClasses = progressStyle();
  let {
    blobURL,
    readyRecording,
    isRecording,
    completeRecording,
    startRecording,
    reStartRecording,
    stopRecording,
    onStop,
  } = ProcessRecord();
  return (
    <>
      <div>
        <div>
          {isRecording && (
            <>
              <div>Recording...</div>
              <div>
                <button onClick={stopRecording}>End record process</button>
              </div>
            </>
          )}
          {completeRecording && (
            <>
              <div>Complete</div>
              <div>
                <div>0:00</div>
                <button onClick={reStartRecording}>Record again</button>
              </div>
            </>
          )}
        </div>
        {readyRecording && (
          <button
            onClick={startRecording}
          >
            Record now
          </button>
        )}
      </div>
      <div>
        <ShowRecord />{/*Only appears when recording process finishes to show result*/}
      </div>
    </>
  );
}

State info

State	Type	Details
blobURL	string || null	return audio url data if record finish, initial value of null
readyRecording	boolean	used to check status before recording process start
isRecording	boolean	used to check status when in recording process
completeRecording	boolean	used to check status when recording process finishes
startRecording	func	Function apply to start recording process
reStartRecording	func	Function apply to restart recording process
stopRecording	func	Function apply to stop recording process
onStop	func	Only use for internal logic of library

@License

DAT_TRAN