25+5 clock React Audio

So I have been working on my 25+5 clock, and I basically have everything working I just need to clean up tests and add more styling but I am STRUGGLING with getting the audio to play once the timer reaches 00:00. I have tried doing useRef, where

function App() {
const audioElement = useRef(null);

and

audio id=“beep” src=“Beep.mp3” type=“audio/mpeg”

then within a useEffect:

useEffect(()=>{
if (timeLeft === 0 ){
audioElement.play();
if (currentSessionType === ‘Session’){
setCurrentSessionType(‘Break’)
setTimeLeft(breakLength)
} else if (currentSessionType === ‘Break’){
setCurrentSessionType(‘Session’)
setTimeLeft(sessionLength);
}
}
},[breakLength, currentSessionType, timeLeft, sessionLength, audioElement])

I have been toggling back and forth trying new things but I havent been able to properly implement anything. Can someone help explain this to me or suggest an alternate approach?

i think a link to your project would be a bit more helpful so everyone can see what the problem is .

It doesn’t look like you assigned the ref. Check out the docs for how to use useRef

These should be in order by descent of screen



I’m fairly sure you should see console errors if you inspect element during the play but anyway the src is referring to a string value but you have to import the mp3 file and use that as the src value

Wow I feel dumb. I was still referencing it as if it was only html :woman_facepalming:

Thank you for simplifying my over-complicated problem-solving process. I appreciate it.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.