React에서 Audio 사용하기 — audio 태그로 충분할 때와 Web Audio API로 넘어가야 할 때
React에서 오디오를 다루는 방법은 크게 두 갈래입니다. HTML <audio> 태그를 React 컴포넌트로 감싸 쓰는 방식과, 브라우저의 Web Audio API를 직접 제어하는 방식입니다. 데스크탑 브라우저에서 단순 재생만 하면 전자로 충분하지만, 모바일에서 음정이 어긋나거나 첫 음이 누락되는 문제를 겪었다면 후자로 넘어갈 시점입니다. 실제로 로컬 mp3를 audio 태그로 재생하던 청음 프로그램이 모바일에서 코드 싱크가 밀리고 첫 음이 들리지 않아, Firebase Storage에 음원을 올리고 Web Audio API로 재생하는 구조로 갈아탄 사례가 있습니다.
audio 태그 방식이 무너지는 지점
HTML audio 태그는 구현이 단순한 대신 재생 타이밍을 세밀하게 제어하기 어렵습니다. 데스크탑 브라우저 환경에서는 별 무리 없이 동작하던 코드가 모바일 테스트에서 문제를 드러낸 것이 대표적입니다. 코드 재생이 밀리거나, 음정 재생에서 아예 첫 음이 들리지 않는 증상이 여기에 해당합니다.
이런 증상은 태그 자체의 문법 문제가 아니라 재생 스케줄링의 정밀도 문제입니다. 음정이나 코드를 순차적으로 들려주고 맞추는 용도라면 재생 시작 시점이 어긋나는 순간 프로그램 전체가 무너집니다. audio 태그를 React 래퍼로 감싼 라이브러리도 존재하지만(react-audio-player의 최신 버전은 0.17.0, 마지막 배포가 5년 전), 이 역시 태그 기반이라는 근본 한계를 벗어나지 않습니다.
Web Audio API로 바꾸면 달라지는 것
Web Audio API는 오디오 파일을 전문적으로 다루는 자바스크립트 기술로, 음원을 버퍼 단위로 디코딩해 원하는 시점에 정확히 재생할 수 있습니다. 앞서 언급한 청음 프로그램은 기존 재생 방식을 Firebase Storage에 음원을 올려두고 HTTP로 가져와 Web Audio API로 재생하는 구조로 교체했습니다.
작업 흐름은 다음과 같습니다.
- Firebase 프로젝트를 만들고 Storage에 음원 파일을 업로드합니다.
- HTTP 요청을 위해 CORS 설정을 먼저 해줍니다. 이 설정이 빠지면 음원을 가져오는 단계에서 막힙니다.
- 업로드한 파일의 액세스 토큰 영역을 클릭하면 GET 요청 시 재생 가능한 전체 URL을 복사할 수 있습니다.
- AudioContext 인스턴스를 생성하고, 음원을 버퍼에 담아 디코딩합니다.
- 재생 버튼을 누르면 디코딩해 둔 음원을 버퍼 소스 노드에 넣고 AudioContext에 connect해 순차 재생합니다.
코드 분량이 길어 보이는 것과 별개로, 구조 자체는 버퍼에 담고 디코딩한 뒤 노드에 연결해 재생하는 흐름으로 단순합니다.
두 방식 비교
| 항목 | audio 태그 | Web Audio API |
|---|---|---|
| 구현 난이도 | 낮음 | 높음 |
| 재생 타이밍 제어 | 제한적 | 정밀 제어 가능 |
| 모바일 안정성 | 취약 사례 있음 | 권장되는 대안 |
| 음원 로딩 | 로컬 파일 가능 | HTTP URL 주소 활용 |
Firebase Storage 연동 시 준비물
| 항목 | 값 |
|---|---|
| 저장소 서비스 | Firebase Storage |
| 필수 선행 설정 | CORS 설정 |
| URL 확보 위치 | 액세스 토큰 클릭 |
| 요청 방식 | GET |
CORS 설정 방법은 별도 문서로 정리되어 있으니, Storage에 파일을 올리기 전에 먼저 처리해 두는 편이 순서상 맞습니다. 파일 업로드 자체는 간단한 편이라 연동 과정에서 큰 걸림돌이 되지 않습니다.
실제 적용 순서
- 재생하려는 음원을 Firebase Storage에 업로드합니다.
- CORS 설정을 적용합니다.
- 각 파일의 액세스 토큰을 클릭해 재생 가능한 전체 URL을 확보합니다.
- AudioContext 인스턴스를 생성합니다.
- URL로 음원을 가져와 버퍼에 담고 디코딩합니다.
- 재생 시점에 버퍼 소스 노드에 음원을 넣고 AudioContext에 connect합니다.
- 순차 재생이 필요한 경우 노드를 순서대로 연결해 처리합니다.
짚고 갈 주의사항
Firebase를 처음 쓰는 경우에도 인터페이스가 직관적이어서 Storage 연동 자체에서 막히는 일은 드뭅니다. 다만 CORS 설정을 건너뛰고 음원 URL부터 확보하려 하면 요청 단계에서 문제가 생기므로 순서를 지키는 것이 안전합니다. 또한 Web Audio API로 전환했다고 해서 기존 audio 태그 코드를 무조건 버려야 하는 것은 아닙니다. 데스크탑에서 단순 재생만 하는 화면이라면 태그 방식이 여전히 유효합니다.
Q. audio 태그로 만들었는데 모바일에서만 문제가 생깁니다. 원인은 무엇인가요?
데스크탑에서는 정상 동작하던 코드가 모바일에서 코드 싱크가 밀리거나 첫 음이 누락되는 사례가 보고된 바 있습니다. 재생 타이밍을 정밀하게 잡아야 하는 용도라면 Web Audio API로의 전환을 검토할 만합니다.
Q. Web Audio API를 쓰려면 음원을 반드시 서버에 올려야 하나요?
위 사례에서는 Firebase Storage에 올려 HTTP로 가져오는 방식을 택했습니다. 재생에 필요한 것은 GET 요청이 가능한 전체 URL이며, 이 URL은 Storage의 액세스 토큰 영역에서 확인할 수 있습니다.
Q. Firebase Storage 연동에서 가장 먼저 할 일은 무엇인가요?
CORS 설정입니다. 이 설정을 마친 뒤 파일을 업로드하고 URL을 확보하는 순서로 진행해야 합니다.