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

Question

I tried to build an alert app and it can notify twice.

First notification just play the sound once and second play repeats of the sound.

I import the sound use the webpack :

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

and call this file in my constructor

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

the function of in the timeInterval

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

the playSounds() function:

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

I set a reset function to initialize the alert.

But when I reset and count the timer second times, the state of timeIsComing become true and the sound will play in unlimited loop.

my reset function:

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

Is there way to turn off the repeats?

UPDATE

Demo At CodePen two times alert App Demo

Answer 1

I believe the issue is that you're passing different functions in your addEventListener/removeEventListener calls.

You should bind your this.playSounds function like this :

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

and then you can just do :

this.audio.removeEventListener('ended', this.playSounds, false);

same thing for addEventListener . Binding in the attach/remove of the event will create a new function. So when you try to remove it, it will not find that function.