피드로 돌아가기
Dev.toFrontend
원문 읽기
Web Audio API 기반 Sample-Free 드럼 합성 시스템 설계
Sample-Free Drum Synthesis in Web Audio — Building Kick, Snare, and Hi-Hat from Oscillators in 60 Lines
AI 요약
Context
기존 웹 드럼 머신은 .wav나 .mp3 샘플 파일 로드 방식에 의존하여 Fetch 대기 시간 및 파일 용량 발생. 오디오 파일 없이 OscillatorNode와 Filter를 활용한 실시간 합성으로 즉각적인 재생 성능 확보 필요.
Technical Solution
- Sine Oscillator의 150Hz → 48Hz 급격한 Pitch Sweep을 통한 Kick 드럼의 'Click-to-Boom' Transient 구현
- Triangle Wave(200Hz)의 tonal center와 Bandpass Filter(1.5kHz)를 거친 White Noise를 병렬 합성한 Snare 구조 설계
- Square Wave의 풍부한 Odd Harmonics와 High-Q(12) Bandpass Filter를 조합한 금속성 Hi-hat 음색 생성
- Float32Array 기반 White Noise Buffer 사전 할당 및 재사용을 통한 Garbage Collection 부하 최소화
- exponentialRampToValueAtTime의 Log-space 특성을 고려하여 Target Value를 0.0001로 설정한 Audio Leak 방지
- Chris Wilson 패턴의 Lookahead Scheduler를 도입하여 메인 스레드 지터에 영향을 받지 않는 정밀한 타이밍 제어
실천 포인트
- Web Audio API 사용 시 exponentialRampToValueAtTime의 종착지를 0이 아닌
0.0001로 설정했는지 확인 - 반복적으로 사용되는 Noise Buffer는 매번 생성하지 않고 싱글톤 패턴으로 캐싱하여 메모리 단편화 방지 - 정밀한 오디오 스케줄링 필요 시 JS setInterval이 아닌 AudioContext.currentTime 기반의 Lookahead 큐 도입 검토 - 복잡한 음색 구현 시 단일 파형보다 서로 다른 특성의 Oscillator와 Filter를 병렬로 믹싱하는 구조 적용