How to show progress of the audio being played inside an Animated.View?

Viewed 32

I am trying to create an Animated.View inside which I want to show the progress of the audio being played, similar to seek.

The seek UI component

                         <View
                          style={{
                            width: 78,
                            height: 5,
                            backgroundColor: "#B2B2B2",
                          }}
                        >
                          <Animated.View
                            style={[styles.inner, { width: progress }]}
                          />
                        </View>

The function clicking play function is as follows:

const listenaudio = (audio, id) => {
    setResumeAudio(id);
    if (playAudio != null) {
      playAudio.release();
    }
    setsoundpause(id);
    playAudio = new Sound(audio, Sound.MAIN_BUNDLE, (error) => {
      var duration = playAudio.getDuration();
      getCurrentPlaybackTime(playAudio, duration);
      if (error) {
        return;
      }     
      console.log('duration:',duration)
      console.log('progress value:',_progressValue)
      _progressValue.addListener(({ value }) => {
        // console.log({value:value})
        setProgress(value*78);
      });
      Animated.timing(_progressValue, {
        duration: duration * 1000,
        toValue: 1,
        // easing: Easing.linear,
        useNativeDriver: false,
      }).start(()=>setProgress(0));
      
      // console.log('progress value',_progressValue)
     
      playAudio.play((success) => {
        if (success) {
          setsoundpause(0);
        }
      });
    });
    playAudio.setVolume(1);
  };

 var interval;
  const getCurrentPlaybackTime = (playAudio, duration) => {
    // console.log('duration',duration)
    interval = setInterval(() => {
      playAudio.getCurrentTime((seconds) => {
        if (seconds < duration) {
          console.log('at',seconds)
        } 
        else {
          clearInterval(interval);
          setResumeAudio(0);
        }
      });
    }, 300);
  };

However when I try running it, the _progressValue remains 1 and not updating intermittently, so the animation is not showing up properly. where have I gone wrong?

0 Answers
Related