react-native - 循环音频的 SetTimeout - expo

Question

我想循环播放一段音频，在每次播放音频之前，我想延迟选定的时间。例如，如果我设置延迟为 3 秒，循环为 3 次，当我按下播放时，它将等待 3 秒，播放音频，等待 3 秒，播放音频，等待 3 秒，播放音频。我尝试了一切，但它只是第一次延迟，然后循环运行，之后没有延迟。此外，循环并不像循环集的数量那样精确。我用于循环的方法在此文档中:

https://docs.expo.io/versions/latest/sdk/av/#example-loop-media-exactly-20-times

世博会有办法做到这一点吗？下面是我关于这个问题的代码:

numLoop=3

//function to loop the audio
_onPlaybackStatusUpdate = playbackStatus => {
if (playbackStatus.didJustFinish) {
if (this.state.numberOfLoops == numLoop - 1) {
this.sound.setIsLoopingAsync(false);
console.log(“it’s looping”);
this.setState({ isPlaying: false });
}
this.setState({
numberOfLoops: this.state.numberOfLoops + 1
});
console.log(this.state.numberOfLoops);
}
};

//function run when user press play button
_onPlayPausePressed = () => {
this.setState({ numberOfLoops: 0 });
if (this.sound != null) {
this.sound.setOnPlaybackStatusUpdate(this._onPlaybackStatusUpdate);
this.sound.setIsLoopingAsync(true);
this.setState({ isPlaying: !this.state.isPlaying });

  if (this.state.isPlaying) {
    this.sound.pauseAsync();
  } else {
    setTimeout(() => {
      this.sound.playAsync(); //play the audio
      console.log("play the audio")
    }, 3000); //wait for 3 sec
  }
}
};

在当前代码中，我使用控制台日志来检查按下播放按钮时的工作流程。这是控制台中的结果:

play the audio
1
2
it's looping
3
4
5

我期望的控制台是:

 play the audio
 1
//delay 3 sec
 play the audio
 2
//delay 3 sec
 play the audio
 3
 it's looping

问题已经解决，下面是我如何更改代码以防有人需要它:

//function to loop the audio
_onPlaybackStatusUpdate = playbackStatus => {
    if (playbackStatus.didJustFinish) {
      if (this.state.numberOfLoops >= numLoop - 1) {
        this.sound.pauseAsync();
        this.sound.setIsLoopingAsync(false);
        console.log("it's looping");
        this.setState({ isPlaying: false });
      } else if (this.state.numberOfLoops < numLoop - 1) {
        this.setState({
          numberOfLoops: this.state.numberOfLoops + 1
        });

        this.sound.pauseAsync();
        setTimeout(() => {
          this.sound.playAsync();
          console.log("play the sound");
        }, 2000);
        console.log(this.state.numberOfLoops);
      }
    }
  };

  _onPlayPausePressed = () => {
    this.setState({ numberOfLoops: 0 });
    if (this.sound != null) {
      this.sound.setOnPlaybackStatusUpdate(this._onPlaybackStatusUpdate);
      this.sound.setIsLoopingAsync(true);
      this.setState({ isPlaying: !this.state.isPlaying });

      if (this.state.isPlaying) {
        this.sound.pauseAsync();
      } else {
        setTimeout(() => {
          this.sound.playAsync();
          console.log("play the sound");
        }, 2000);
      }
    }
  };

Answer 1

OP 的解决方案

//function to loop the audio
_onPlaybackStatusUpdate = playbackStatus => {
    if (playbackStatus.didJustFinish) {
      if (this.state.numberOfLoops >= numLoop - 1) {
        this.sound.pauseAsync();
        this.sound.setIsLoopingAsync(false);
        console.log("it's looping");
        this.setState({ isPlaying: false });
      } else if (this.state.numberOfLoops < numLoop - 1) {
        this.setState({
          numberOfLoops: this.state.numberOfLoops + 1
        });

        this.sound.pauseAsync();
        setTimeout(() => {
          this.sound.playAsync();
          console.log("play the sound");
        }, 2000);
        console.log(this.state.numberOfLoops);
      }
    }
  };

  _onPlayPausePressed = () => {
    this.setState({ numberOfLoops: 0 });
    if (this.sound != null) {
      this.sound.setOnPlaybackStatusUpdate(this._onPlaybackStatusUpdate);
      this.sound.setIsLoopingAsync(true);
      this.setState({ isPlaying: !this.state.isPlaying });

      if (this.state.isPlaying) {
        this.sound.pauseAsync();
      } else {
        setTimeout(() => {
          this.sound.playAsync();
          console.log("play the sound");
        }, 2000);
      }
    }
  };