React Pomodoro Clock : audio.play() function crashing

I have tried to import audio this way at the top of the file “./sounds/countdown.wav” and also tried creating a new Audio() stored in a var but every time my clock is 3 seconds shy of ending the Session the function call audio.play( ) crashes saying it’s not a function. Why?

Here is a snippet of the code.

import audio from "./sounds/countdown.wav"

const App = () => {

  let [displayTimer, setDisplayTimer] = useState(25 * 60);
 
const playTimer = () => {
    setIsActive(!isActive);

    countRef.current = setInterval(() => {
      
      if (sixtySecondsRef.current === 0) {
        sixtySecondsRef.current = 60;
        setDisplayTimer((prevDisplayTimer) => prevDisplayTimer - 1);
      }

      sixtySecondsRef.current -= 1;
      displayTimer -= 1;
      setDisplayTimer((prevDisplayTimer) => prevDisplayTimer - 1);
    }, 1000);
  };

>  if (displayTimer === 3) {
>     audio.play();
>   }

  return (
    <div className="App">
      <h1>25 + 5 Clock</h1>
      <div className="break-length-and-session-length">
        <BreakLength
          breakLength={breakLength}
          incrementCount={incrementCount}
          decrementCount={decrementCount}
        />
        <SessionLength
          sessionLength={sessionLength}
          incrementCount={incrementCount}
          decrementCount={decrementCount}
        />
      </div>
      <TimeLeft formatTime={formatTime} breakLengthStart={breakLengthStart} />
      <Buttons
        isActive={false}
        playTimer={playTimer}
        resetTimer={resetTimer}
        pauseTimer={pauseTimer}
      />
    </div>
  );
};

export default App;


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