A simple react native sound recorder and player module suitable for dropping into expo.io and other react native applications. It contains no native platform specific code.
npm install react-native-audio-player-recorder-no-linkingnpm install --save react-native-audio-player-recorder-no-linking
import {Recorder, Player} from 'react-native-audio-player-recorder-no-linking';
javascript
style={{ flex: 1 }}
onComplete={this.recorderComplete}
maxDurationMillis={150000}
showDebug={true}
showBackButton={true}
audioMode={{
allowsRecordingIOS: true,
interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
playsInSilentModeIOS: true,
playsInSilentLockedModeIOS: true,
shouldDuckAndroid: true,
interruptionModeAndroid:
Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
playThroughEarpieceAndroid: false
}}
resetButton={(renderProps) => {
return (
onPress={renderProps.onPress}
danger
block
style={{ marginVertical: 5 }}
>
Reset
);
}}
recordingCompleteButton={(renderProps) => {
return (
onPress={renderProps.onPress}
block
success
style={{ marginVertical: 5 }}
>
Finish
);
}}
playbackSlider={(renderProps) => {
console.log({'maximumValue: ': renderProps.maximumValue});
return (
minimimValue={0}
maximumValue={renderProps.maximumValue}
onValueChange={renderProps.onSliderValueChange}
value={renderProps.value}
style={{
width: '100%'
}}
/>
);
}}
/>
`
This component accepts the following props:
| Name | Type | Default | Description |
| ---------------------- | ---- | -------- | ----------- |
| onComplete | function | none | callback function executed when the user presses the finish recording button. Is passed sound file information (see below) |
| maxDurationMillis | number| 600000 (10 miniutes) | maximum length of the recording in milliseconds |
| audioMode | object | see below | a set of key value pairs used to customize recording see Expo documentation |
| timeStampStyle | object | {
color: 'blue',
fontSize: 40
} | Object containing the style of the timestamp text that is displayed while playing and recording |
| showTimeStamp | boolean | true |determines whether or not to display timestamp |
| showDebug | boolean | false |shows debug related items in a view on the recorder screen |
| showBackButton | boolean | true | show a button the user can press to execute the onComplete function |
$3
The onComplete callback receives an object similiar to the following
`javascript
"size":115824,
"modificationTime":1515107376,
"uri":"file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540reggie3%252Freact-native-expo-sound-recorder/Audio/recording-20cfc766-faba-47cf-9914-8fc81b149012.m4a",
"isDirectory":false,
"exists":true,
"durationMillis": 34535
`
$3
allowsRecordingIOS:true
interruptionModeIOS:
Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
playsInSilentModeIOS: true,
playsInSilentLockedModeIOS: true,
shouldDuckAndroid: true,
interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX
#### Player
`javascript
style={{ flex: 1 }}
onComplete={this.playerComplete.bind(this)}
completeButtonText={'Return Home'}
uri={AUDIO_CLIP_URL}
showDebug={true}
showBackButton={true}
playbackSlider={(renderProps) => {
return (
minimimValue={0}
maximumValue={renderProps.maximumValue}
onValueChange={renderProps.onSliderValueChange}
value={renderProps.value}
style={{
width: '100%'
}}
/>
);
}}
/>
``
{
color: 'blue',
fontSize: 40
} | Object containing the style of the timestamp text that is displayed while playing and recording |