Introduction
This is a package supporting react framework which is used to record voice & deal with logical issues in recording process
🚀 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