개요
웹 브라우저에서 별도의 플러그인 없이 즉석에서 사운드를 생성하고 싶다면 Web Audio API를 활용하면 됩니다. Web Audio API는 오디오를 정밀하게 제어할 수 있는 강력한 인터페이스로, 다음과 같은 기능을 제공합니다.
- 다양한 오디오 소스 선택 및 생성
- 이펙트(효과) 추가
- 오디오 시각화(Audio Visualization)
- 패닝(Panning) 등 공간 음향 처리
예제 코드
아래 코드 스니펫을 실행하면 500Hz 주파수의 사인파(sine wave) 사운드가 5초간 재생됩니다.
// 문서 하나당 하나의 컨텍스트를 사용합니다. 여기서는 하나의 문서에 대한 컨텍스트를 생성합니다. var context = new (window.AudioContext || window.webkitAudioContext)(); // 오실레이터(Oscillator) 생성 var os = context.createOscillator(); os.type = 'sine'; // sine이 기본값입니다. square(사각파), sawtooth(톱니파), triangle(삼각파)도 사용 가능 os.frequency.value = 500; // 주파수를 Hz 단위로 설정 os.connect(context.destination); // 출력 대상(destination)에 연결 // 오실레이터 시작 os.start(); os.stop(context.currentTime + 5); // 현재 시간으로부터 5초 후 정지
코드 설명
1. 오디오 컨텍스트 생성
AudioContext는 Web Audio API의 핵심 객체입니다. 모든 오디오 작업은 이 컨텍스트를 통해 이루어지며, 구형 브라우저 호환성을 위해 window.webkitAudioContext를 함께 확인합니다.
2. 오실레이터 설정
오실레이터는 전자적으로 파형을 생성해 소리를 만드는 요소입니다. type 속성으로 파형의 종류(sine, square, sawtooth, triangle)를 지정하고, frequency.value로 주파수를 설정하여 음의 높이를 조절할 수 있습니다.
3. 연결 및 재생
connect(context.destination)을 호출하면 생성된 사운드가 스피커로 출력됩니다. 마지막으로 start()로 재생을 시작하고, stop()으로 지정된 시간 후 자동으로 정지시킵니다.