react-voice-decorator
React voice recorder component using navigator
's mediaDevices
and MediaRecorder
api that provides record/play/pause functionalities for developers using render-props design pattern.
demo
see Demo at https://codesandbox.io/s/react-voice-recorder-demo-9i8ik
usage
- add package using
yarn
yarn add react-voice-decorator
- use the render-props component:
{ const voiceRef = const getVoice = return <div> <VoiceDecorator render= <> <h1 onClick=propstoggleRecord> propsisRecording ? 'Stop Recording' : 'Record' </h1> <h1 onClick=propstogglePlay> propsisPlaying ? 'Pause' : 'Play' </h1> </> voiceGetter=getVoice /> </div> }
- available props:
prop key | type |
---|---|
toggleRecord | function |
togglePlay | function |
isPlaying | boolean |
isRecording | boolean |
voiceGetter | function |
ref
You can get recorded voice as an audio object using react ref
limitation
This package doesn't work on Safari with iOS versions lower than 13.4 (for the higher versions it works fine)