실무에서 AudioContext를 통해서 오디오를 재생하는 앱을 만들고 있었다. 이 앱에서 기능을 추가할 때 앞뒤에 필요 없는 부분을 제외하고 원하는 구간의 오디오를 추출하는 기능을 구현하는 과정에서 OfflineAudioContext에 대해서 배우게 되었다.
Web Audio API에서 AudioContext는 실시간으로 오디오를 처리하는 데 사용된다. 그런데 우리가 원하는 것은 실시간으로 오디오를 재생하지 않고, 특정 시간과 길이에 맞게 오디오 파일을 잘라내는 것이다. 여기서 등장하는 것이 바로 OfflineAudioContext이다.
AudioContext와 OfflineAudioContext의 차이점
AudioContext는 실시간 오디오 처리에 사용된다. 예를 들어, 웹 브라우저에서 음악을 재생하거나, 실시간으로 오디오 효과를 적용할 때 사용한다.
// 실시간 오디오 처리를 위한 AudioContext 생성
const audioContext = new AudioContext();
// 오디오 소스 생성
const source = audioContext.createBufferSource();
source.buffer = audioBuffer; // 오디오 버퍼 설정
// 오디오 효과 추가
const gainNode = audioContext.createGain();
gainNode.gain.value = 0.5; // 볼륨을 50%로 설정
// 노드 연결
source.connect(gainNode);
gainNode.connect(audioContext.destination);
// 실시간 재생 시작
source.start();반면, OfflineAudioContext는 실시간 재생 없이 오디오를 처리한다. 이는 오디오 파일을 자르거나, 효과를 미리 적용하거나, 파형을 분석하는 등의 작업에 적합하다. OfflineAudioContext는 처리가 완료되면 AudioBuffer를 반환한다. (Blob 타입)
요약
- 실행 방식: AudioContext는 실시간으로 처리하고 재생하지만, OfflineAudioContext는 모든 처리를 메모리에서 수행한다.
- 성능: OfflineAudioContext가 일반적으로 더 빠르며, CPU 사용량도 더 효율적이다.
- 용도: AudioContext는 실시간 재생과 상호작용이 필요한 경우에, OfflineAudioContext는 오디오 파일 가공이나 분석에 적합하다.
- 결과물: AudioContext는 실시간 출력을, OfflineAudioContext는 AudioBuffer를 생성한다.
왜 나는 OfflineAudioContext를 선택했나?
AudioContext는 실시간으로 오디오를 재생하면서 처리하는데 특화되어 있다. 이 경우 다량의 오디오를 자르고 붙이려면 하나하나 재생하면서 실시간으로 처리해야 한다. 반면 OfflineAudioContext는 실시간으로 오디오를 재생하지 않고, 빠르게 오디오를 처리할 수 있다. 이 덕분에 오디오를 자르고 나서 그 결과만 빠르게 얻을 수 있다.
OfflineAudioContext 객체를 만들기 위해 필요한 것들
const offlineCtx = new OfflineAudioContext(
2, // 채널 수 (모노는 1, 스테레오는 2)
audieLength * 44100, // 필요한 샘플 수 (오디오 길이에 맞게 계산)
44100 // 샘플 레이트 (사운드의 품질)
);
- 채널 수: 2 (스테레오)로 설정한다. 만약 모노라면 1로 설정할 수 있다.
- 샘플 수: 오디오의 길이에 맞는 샘플 수를 계산한다. sample rate에 오디오의 길이 (초단위)를 곱해서 계산한다.
- 샘플 레이트: 44.1kHz로 설정한다. 이는 CD 품질의 오디오에 해당한다.
다음화 예고
다음 포스팅에서는 위 OfflineAudioContext를 통해서 직접 오디오를 자르는 코드를 작성해보겠다.
