Question

我尝试构建一个提醒应用，它可以通知两次。

第一次通知只播放一次声音，然后播放声音重复播放。

我使用webpack：

导入声音

import audio from '../file/sound.mp3';

并在我的构造函数中调用此文件

constructor(props){
  super(props);
  this.state={
    timeIsComing: false,
    timeIsUp: false,
  }
  this.audio = new Audio(audio);
}

timeInterval

中的功能

countDown(){
 if(timeIsComing){
  this.audio.play();
 }
 if(timeIsUp){
  this.audio.addEventListener('ended', this.playSounds.bind(this), false);
  this.audio.play();
 }
}

playSounds()函数：

playSounds(){
 this.audio.currentTime = 0;
 this.audio.play();
}

我设置了一个重置功能来初始化警报。

但是当我重置并计时第二次时，timeIsComing的状态变为true，声音将以无限循环播放。

我的重置功能：

reset(){
 this.setState({timeIsComing: false, timeIsUp: false});
 this.audio.removeEventListener('ended', this.playSounds.bind(this), false);
 this.audio.pause();
}

有没有办法关闭重复？

更新

在CodePen进行演示two times alert App Demo

Answer 1

我认为问题在于你在addEventListener / removeEventListener调用中传递了不同的函数。

您应该绑定Department函数，如下所示：

this.playSounds

然后你可以这样做：

constructor(props){
  super(props);
  this.state={
    timeIsComing: false,
    timeIsUp: false,
  }
  this.playSounds = this.playSounds.bind(this);
  this.audio = new Audio(audio);
}

this.audio.removeEventListener('ended', this.playSounds, false);也是如此。在附加/删除事件中绑定将创建一个新功能。因此，当您尝试删除它时，它将找不到该功能。

如何在reactjs中关闭音频循环？

1 个答案: