25+5 clock React Audio

[lydia.sanchez.writes]

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?

[3xxxo]

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

[Jimbalin]

@lydia.sanchez.writes

audioElement

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

Hooks API Reference – React

[lydia.sanchez.writes]

These should be in order by descent of screen

[Jimbalin]

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

[lydia.sanchez.writes]

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

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