2023. 3. 21. 09:41
Web Audio API
- 자바스크립트로 오디오 소스에 다양한 변화를 줄 수 있는 시스템
- 음원 로딩, 재생, 정지, 패닝, 디스토션, 딜레이 등 여러가지 음향 효과
- 파형 막대를 그리는 등 데이터의 시각화도 가능
- AudioContext 객체를 생성하면서 시작
- AudioContext 객체는 내부에 여러 개의 Audio Node 들을 가질 수 있음
- Audio Node 들은 각각 하나의 역할을 수행하는 모듈들
- GainNode는 음원의 볼륨 크기를 조절
- PannerNode는 음원에 패닝 효과를 적용하고 조절
- AnalyserNode는 음원으로부터 데이터를 추출
- AudioContext 안에 있는 노드들은 서로 연결되어
하나의 연결된 그래프(Audio routing graph)를 형성
Web Audio API 흐름
1. AudioContext 객체 생성
const audio = new AudioContext();
const audio = new (window.AudioContext() || window.webkitAudioContext)();
2. AudioContext 내부에 오디오 소스를 생성
오디오 소스 - <audio> 태그, Oscillator, Raw PCM 데이터, 실시간 Stream
<audio id="audio-source" src="./src/audio.mp3"/>
const audioSource = document.querySelector('#audio-source');
const source = audio.createMediaElementSource(audioSource);
3. 게인, 패너, 리버브, 컴프레서 등 여러가지 이펙터 노드들 생성
const gainNode = audio.createGain();
4. 오디오의 최종 목적지(destination) 정함 - 노트북 스피커 등
5. 소스 -> 이펙터 노드 -> 목적지 순서대로 연결
const gainConnected = source.connect(gainNode);