Make live audio wave animation when user is recording an audio in React Native - Stack Overflow

admin2025-04-16  2

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>
  );
转载请注明原文地址:http://anycun.com/QandA/1744788866a87641.html