Question

我正在播放本机中的一些音频文件。对于音频文件的进度（持续时间），我正在显示滑块，用于显示音频文件的状态以及向前和向后播放持续时间。

但是，根据音频持续时间，它不会继续移动位置（如计时器）。

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)}
                />

必须根据音频持续时间自动移动滑块值

有什么建议吗？

Answer 1

您需要一个计数器来每秒更新进度条

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);
};

滑块无法在React Native中继续使用onProgress方法前进

1 个答案: