Animating Voice Pitch Tracking in React Native

30 Views Asked by At

I'm developing a React Native app that uses @react-native-voice/voice to record the voice and covert to text. I use the following callback to keep track of the voice volume and use the pitch value to then perform an animation.

Voice.onSpeechVolumeChanged = (event: SpeechVolumeChangeEvent) => {
  const currentPitch = event.value!;

  setState(prevState => {
    return {...prevState, pitch: currentPitch};
  });
};

Now the problem arise because the pitch value is constantly updated, at least once per second, and trying to use this value to perform an animation with reanimated it's impossible because it lags.

enter image description here

I want to achieve something like the ChatGPT app, that perform an animation when the user is talking, like in the photo.

enter image description here

Thank you

0

There are 0 best solutions below