Can't get sound to play in Pomodoro Clock

#1

My pen is here: https://codepen.io/Crimson_Macaw/pen/ebRNzg and my main issue that I can’t figure out is how to get the sound to play when the timer reaches 00:00. I’ve copied the relevant parts of other people’s working code and pasted them directly in my code and for some reason it won’t work in my code.

The command to play the sound is in my handleStart function below:

 handleStart = () => {
    if(this.state.timerStop ){
      this.timer = setInterval(() => {
        this.setState({
          timerStart: true,
          timerStop: false
        });
        if(this.state.timerStart && this.state.minutes >= 0){
        this.setState((prevState) => ({seconds: prevState.seconds - 1}))
          if(this.state.seconds < 0){
             this.setState((prevState) => ({minutes:prevState.minutes - 1, 
                                            seconds: 59}))
             }
        }
        }, 1000)
    
    }   
    if(this.state.minutes == "00" && this.state.seconds == "01"){
      this.audio.play();
    }
    }

The link to the audio file is at the very bottom of the code. The logic of the syntax makes sense to me but maybe it’s just that it’s been coded incorrectly. Would appreciate any help on this one.

#2

HI,
this is not related to the topic but how do you compose a topic in this forum
am not trolling.cant seem to find my way around here tried the keyboard shortcut keys shit + c , c doesnt work anyone!

#3

It was because your if statement is outside the setInterval function. In other words it will only check once after you click the button (=> always return false unless you set the condition to be equals to the start time). Move the if inside then it will work.

#4

Thanks, it worked. Would you be able to explain it some more because I’m still not completely understanding why the way I had it originally wouldn’t work. Because it seemed to me that it got around that issue that you brought up.

#5

Well, you set a Interval function to check the condition every second if the timer is running. So, the function will run every second to recheck the condition each time. If your if statement (audio) is outside that block => no check for condition every second, so the if condition will only check once and for all (right after you click the button). I hope this makes sense to you xD Sorry I’m not so good at explaining stuff.

#6