Next.js 13 Audio is not defined 에러 해결

Next.js13 에서 버튼을 누르면 wav 파일이 재생되는 기능을 구현해보았다.

"use client";
import tickSound from "../../public/sounds/tick1.wav";

export default function Sound() {
  const tick = new Audio(tickSound);

  const metronomeSoundHandler = () => {
    tick.play();
  };

  return (
    <>
      <button onClick={metronomeSoundHandler}>Play</button>
    </>
  );
}

작동은 잘 됐지만, 터미널 창에서 Audio is not defined 라는 에러가 발생했다.

이 이유는, 클라이언트 컴포넌트라고 할지라도 처음에 렌더링 될때는 SSR 방식을 이용해서 렌더링 되는데, Audio 객체가 없을수도 있기때문에 저런 에러가 나오는것이다.

useState를 통해서 값을 할당해준다.

그리고 브라우저가 렌더링 되고 tick에 초깃값으로 new Auido(tickSound)를 넣어준다.

"use client";
import { useState, useEffect } from "react";
import tickSound from "../../public/sounds/tick1.wav";

export default function Sound() {
  const [tick, setTick] = useState<HTMLAudioElement>();

  const metronomeSoundHandler = () => {
    tick && tick.play();
  };

  useEffect(() => {
    setTick(new Audio(tickSound));
  }, []);

  return (
    <>
      <button onClick={metronomeSoundHandler}>Play</button>
    </>
  );
}

문제없이 클릭하면 바로 tickSound가 재생된다.