시도한 방법
•
오디오 파일은 이미지 파일을 프로젝트에 불러올 때처럼 import 하여 직접 가져오는 방식으로는 사용할 수 없는 것 같았다.
→ 오디오 파일 경로를 가지고 new Audio 객체를 생성하여 효과음을 재생하고 싶은 곳에서 .play() 코드로 효과음을 재생하도록 작성
•
로컬 dev 환경에서는 사운드가 잘 재생되었으나 빌드 과정에서 Audio is not defined 에러 발생
→ Next.js는 빌드시 서버 사이드에서 페이지를 미리 렌더링하여 정적 HTML을 생성하는데, 이 때 클라이언트 사이드에서만 사용 가능한 객체나 함수를 사용 시 이와 같은 오류가 발생한다.
→ Audio 객체는 클라이언트 객체로, 서버 사이드 렌더링 시 코드가 실행되지 않아 해당 객체를 찾을 수 없다는 오류가 뜨는 것이다.
Plain Text
복사
해결책
•
window 객체가 있는지 확인하여 클라이언트 측에서만 실행되도록 조건을 추가하여 해결
const gameoverSound = useRef<HTMLAudioElement | null>(null);
if (typeof window !== 'undefined') {
gameoverSound.current = new Audio('game/gameover.mp3');
}
JavaScript
복사