I'm using react-native-audio-recorder-player
in my React Native App, and I want to animate a wave like in the video when the user is talking and stop them when is silent. Now I have tried to do something as follow, but the movements of the bars are always the same. I'd like to achieve something like in the image below:
import AudioRecorderPlayer from 'react-native-audio-recorder-player';
const audioRecorderPlayer = new AudioRecorderPlayer();
const metering = useSharedValue(-150);
useEffect(() => {
audioRecorderPlayer.addRecordBackListener(e => {
const currentMetering = e.currentMetering ?? 0;
metering.value = currentMetering;
});
}, []);
// 0 1 2 3 4 5
return (
<View style={styles.container}>
{Array.from(Array(6).keys()).map(index => {
let maxHeight = 150;
if (index == 0 || index == 5) {
maxHeight *= 0.7;
}
if (index == 1 || index == 4) {
maxHeight *= 0.85;
}
const animatedStyle = useAnimatedStyle(() => {
return {
height: withTiming(
interpolate(metering.value, [-160, -60, 0], [10, 10, maxHeight]),
),
};
});
return (
<Animated.View
key={index}
style={[
{
backgroundColor: theme.colors.accent,
width: 16,
borderRadius: 32,
},
animatedStyle,
]}></Animated.View>
);
})}
</View>
);