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.