react-native - 循环音频的 SetTimeout - 世博会

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