I am currently using React Native Audio to record audio and storing the sound. I am wondering if there is anyway to get the progress of this recording in realtime to map the microphone input to an animation, to give a visual feedback that the microphone is working.
Currently, the onProgress() function of the package only sends, from what I've found, only the current timecode.
Thanks for any help!
I am currently working on somthing similer.
That how i done it.
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity,
Button,
LayoutAnimation,
Image,
ScrollView,
Animated
} from 'react-native';
export default class App extends Component {
state = {
isPressed: false,
animated: new Animated.Value(0),
opacityA: new Animated.Value(1),
}
constructor(props) {
super(props);
this._onPress = this._onPress.bind(this);
}
_runAnimation() {
const { animated, opacityA } = this.state;
Animated.loop(
Animated.parallel([
Animated.timing(animated, {
toValue: 1,
duration: 1000,
}),
Animated.timing(opacityA, {
toValue: 0,
duration: 1000,
})
])
).start();
}
_stopAnimation() {
Animated.loop(
Animated.parallel([
Animated.timing(animated),
Animated.timing(opacityA)
])
).stop();
}
_onPress() {
this.setState(
state => ({ isPressed: !state.isPressed }),
)
}
_micButton() {
const { isPressed, animated, opacityA, } = this.state;
if (isPressed) {
//some function
this._runAnimation();
return (
<Animated.View style={{
width: 100,
height: 100,
borderRadius: 50,
backgroundColor: 'rgba(153,0,0,0.4)',
opacity: opacityA,
transform: [
{
scale: animated
}
]
}}>
{/* icon or image */}
</Animated.View>
);
} else {
//some function
return (
<View style={{
width: 100,
height: 100,
borderRadius: 50,
backgroundColor: 'rgba(153,0,0,0.4)',
}}>
{/* icon or image */}
</View>
);
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this._onPress}>
{this._micButton()}
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
i hope that solve your problem.
I use expo-av . There is an API setOnRecordingStatusUpdate , you can set a function that is called regularly with the status of the Recording. For example,
async startRecording(callback: onRecordingStatusUpdated) {
this.isLoading = true
await Audio.setAudioModeAsync({
allowsRecordingIOS: true,
interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
playsInSilentModeIOS: true,
shouldDuckAndroid: true,
interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
playThroughEarpieceAndroid: true
});
if (this.recording !== null) {
// only one recorder is allowed to exist
this.recording.setOnRecordingStatusUpdate(null);
this.recording = null;
}
const recording = new Audio.Recording();
await recording.prepareToRecordAsync(this.recordingSettings);
// ✨✨✨set the callback
recording.setOnRecordingStatusUpdate(callback);
this.recording = recording;
await this.recording.startAsync(); // Will call this._updateScreenForRecordingStatus to update the screen.
this.isLoading = false
}
// 🌟🌟🌟
startRecording((status => console.log('[onRecording]', status)))
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.