React 웹 게임 효과음, Safari 호환성 문제와 Web Audio API 해결법

리액트 기반 웹 게임 개발 중 Safari 브라우저에서 효과음이 한 번 재생된 후 다시 재생되지 않는 크로스 브라우저 이슈가 발생했다. HTMLAudioElement의 play() 메서드가 두 번째부터 작동하지 않는 현상이 발생했으며, currentTime 초기화나 load() 강제 실행으로는 근본적인 문제를 해결하기 어려웠다.

이 문제는 Web Audio API를 도입하여 해결했다. 기존 방식은 파일 재로딩으로 인한 네트워크 오버헤드와 출력 지연(레이턴시)을 유발했으나, 웹 오디오는 AudioContext와 AudioBufferSourceNode를 활용해 오디오 데이터를 메모리에 로드하고 즉시 재생할 수 있다.

구체적인 해결 과정은 다음과 같다:

• AudioContext 인스턴스를 생성하여 오디오 그래프의 컨텍스트를 확보한다.
• fetch로 오디오 파일을 가져와 ArrayBuffer로 변환한 뒤, decodeAudioData로 디코딩하여 AudioBuffer를 만든다.
• 재생 시마다 새로운 BufferSourceNode를 생성하고 destination 노드에 연결해 start()를 호출한다.
• 오디오 컨텍스트가 suspended 상태일 경우 resume()을 호출하여 하드웨어 자원 문제를 방지한다.

이 방식을 적용하면 사운드 출력 지연이 크게 개선되어 게임 조작감(손맛)이 향상되며, Safari와 Chrome 등 주요 브라우저에서 일관된 오디오 재생이 가능하다.