Slider not keep on moving with onProgress method in react native

Question

I am playing some audio files in react native. For progress of the audio file (Duration), I am showing slider for status of the audio file and for forward and reverse the duration.

But, According to audio duration, It is not keep on moving the position (like timer).

https://www.npmjs.com/package/react-native-slider

getInfo = async () => {
    try {
      const info = await SoundPlayer.getInfo();
      // console.log('getInfo', info); // {duration: 12.416, currentTime: 7.691}
      const currentTime = get(info, 'currentTime');
      this.setState({ currentDuration: currentTime });
    } catch (e) {
      console.log('There is no song playing', e);
    }
  }
         getProgress = (e) => {
           console.log('getProgress calling');
           this.getInfo();
           this.setState({
            currentTime: this.state.currentDuration,
           });
         }

                <Slider
                  maximumValue={parseFloat(totalLength)}
                  minimumTrackTintColor="color"
                  maximumTractTintColor="color"
                  step={1}
                  value={currentTime}
                  onSlidingComplete={value => this.onValueChange(value)}
                  style={styles.slider}
                  thumbTintColor="red"
                  trackLength={parseFloat(totalLength)}
                // onSlidingStart={() => this.setState({ paused: true })}
                  currentPosition={currentTime}
                  onProgress={e => this.getProgress(e)}
                />

It has to move slider value automatically according to audio duration

Any suggestions?

Answer 1

You'll need a counter to update the progress bar each second

timer = null;

durationCounter = () => {
  this.timer = setInterval(async () => {
    const info = await SoundPlayer.getInfo();
    this.setState({
      currentTime: info.currentTime
    });
  }, 1000);
};

componentDidMount = () => {
  SoundPlayer.onFinishedLoading(async success => {
    this.durationCounter();
  });
}


componentWillMount = () => {
  this.timer && clearInterval(this.timer);
};