🥭

Gatsby를 이용하여 간단한 웹 페이지를 개발하고 있었다.
이 때, Audio를 이용하여 노래를 재생시키려 했는데, 아래와 같은 에러 메세지가 나왔다.

1
WebpackError: ReferenceError: Audio is not defined

이전에 봤던 것처럼 서버 사이드 렌더링(SSR)로 인해 Audio가 없기 때문에 발생한 문제이다.
따라서 해당 객체가 먼저 정의되어 있는지 확인이 필요하다.

1234567891011
export default function Player({ url, className }) {
    const [playing, setPlaying] = useState(false);
    const [audio] = useState(typeof Audio !== "undefined" && new Audio(url));


    useEffect(() => {
        playing ? audio.play() : audio.pause()


    }, [playing])


  ...
}

typeof Audio !== "undefined" 으로 해당 객체를 먼저 확인하면 기능도 정상 동작하고 빌드도 가능하다.

Reference