最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin0浏览0评论

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>
  );
发布评论

评论列表(0)

  1. 暂无评论