Pomodoro Clock - Not passing audio reset

Hello!

I would really appreciate some help with tests. Works fine - reset button does reset the sound if clicked while sound is playing.

but won’t pass the following:

  • User Story #26: When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 audio tag and have a corresponding id=“beep”.

preload='auto' on the audio element

I have tried both with and without if statement.

Without if:
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
With if : no error

Either way not passing. It shows that it’s failing test #20 when all done but #26 is what it gets stuck on. No idea what’s happening there. It passed #20 while testing.

Here is the onResetClick() handler

  onResetClick() {
    clearInterval(this.timer);
    this.setState ({
        breakLength: 5,
        sessionLength: 25,
        timeLeft: '25:00',
        timerType: 'Session',
        timerStatus: 'off'
    });
    document.title = 'Pomodoro Clock | Ricardo Ledesma';
    if (!this.timerAudio.paused) {
      this.timerAudio.pause();
      this.timerAudio.currentTime = 0
    }
  }

setTimer() method which plays audio when timer is done

  setTimer(then) {
    this.timer = setInterval(() => {
      const secondsLeft = Math.round((then - Date.now()) / 1000);
      if (secondsLeft < 0) {
        clearInterval(this.timer);
        this.timerAudio.play();
        this.changeTimerType();
        return;
      }
      this.setTimeLeft(secondsLeft);
    }, 1000);
  }

Here is the JSX being returned

    return (
     <div className='wrapper'>
       <div className='break'>
         <p id='break-label'>Break Length</p>
         <button onClick={this.onLengthClick.bind(this, '-', 'breakLength')} id='break-decrement'>
           <i className="fas fa-arrow-down fa-2x" />
         </button>
         <span id='break-length'>{this.state.breakLength}</span>
         <button onClick={this.onLengthClick.bind(this, '+', 'breakLength')} id='break-increment'>
           <i className="fas fa-arrow-up fa-2x" />
         </button>
       </div>
       <div className='session'>
         <p id='session-label'>Session Length</p>
         <button onClick={this.onLengthClick.bind(this, '-', 'sessionLength')} id='session-decrement'>
           <i className="fas fa-arrow-down fa-2x" />
         </button>
         <span id='session-length'>{this.state.sessionLength}</span>
         <button onClick={this.onLengthClick.bind(this, '+', 'sessionLength')} id='session-increment'>
           <i className="fas fa-arrow-up fa-2x" />
         </button>
       </div>
       <div className='timer'>
         <p id='timer-label'>{this.state.timerType}</p>
         <div id='time-left'>{this.state.timeLeft}</div>
       </div>
       <div className='timerButtons'>
         <button onClick={this.onPlayPauseClick}id='start_stop'>
           <i className="fas fa-play fa-lg" />
           <i className="fas fa-pause fa-lg" />
         </button>
         <button onClick={this.onResetClick} id='reset'><i className="fas fa-sync-alt fa-lg"></i></button>
       </div>
       <audio id='beep' preload='auto' ref={elem => this.timerAudio = elem} src='http://soundbible.com/mp3/Fire_pager-jason-1283464858.mp3'></audio>
     </div>
    );

Again really appreciate it.

It would be better to link to your repo or CodePen project. Bugs are rarely obvious from reading code.

If you’re looking at a repo - aren’t you reading code? :wink:

Good point though

Repo Links:

timer.js (timer component) in repo

src folder

Only if I read it instead of running it locally. :wink:

I don’t see any reason for the test to fail, so either your code doesn’t meet some unspecified requirement or there’s a bug in the test. You should create an issue on the issues page.

Hi. Have you fixed it? I’m having the same problem here