javascript - React Native と Animated の同期サウンド

Question

メトロノームを含むアプリを作成しています。react-native-sound と Animated を使用しています。メトロノームの音を非常に高い精度でトリガーし、アニメーションと同期させる必要があります。私はあまり経験がないので、ハック ソリューション (Animated.listener でサンプルをトリガーする) を使用しましたが、非常に非効率的です。

  <Button
icon={this.state.paused ? <Icon name="play" size={25} color='white'/> : <Icon name="pause" size={25} color='white'/>}
onPress={() => {
  if (this.state.paused)
    {this.setState({paused: false});
    this.animateTiming();
    let loopCount = 0;
    this.animatedValue.addListener(({value}) => {
      loopCount++;
      if(value==1) loopCount=0;

      // metronome playback
      if ([0,60,120,180].includes(loopCount)) playSound(audioList[0], 0);
  });


    }

誰かがそれをより良く処理する方法について何か提案はありますか? ありがとうございました！

アップデート #2

this.animateTiming() は次のようになります。

animateTiming(){
this.animatedValue.setValue(START_POINT);
Animated.loop(
    Animated.timing(this.animatedValue, {
      toValue: STOP_POINT,
      easing: Easing.linear,
      duration: 4000, //these are milliseconds
      useNativeDriver: true
    })
).start(); 

}

ループの長さは 4000 ミリ秒なので、60 fps では loopCount は 240 になります。したがって、[0,60,120,180] は「毎秒サウンドを再生する」ことを意味します。レンダリング関数が呼び出されると、各ループの開始時に遅延が発生します。遅延 (約 80 ミリ秒) の原因は、VexFlow を使用した楽譜のレンダリングであることがわかりました (このリンクの「はじめに」の例を参照してください)。

問題は、VexFlow のレンダリングとアニメーションを何らかの形で並行して実行できるかどうかということです (オーディオは完全に間に合う必要があり、表記のレンダリングのわずかな遅延は問題ではありません)。表示される内容は、前のループ サイクルでのユーザーのアクションに依存するため、事前レンダリング表記は実行できません。