피드로 돌아가기
Dev.toFrontend
원문 읽기
AudioContext 기반 Lazy-Loading 및 GainNode 제어로 구현한 저지연 브라우저 가상 악기
The bellows move, but the CPU stays quiet — what’s powering this browser based harmonium?
AI 요약
Context
브라우저 환경의 리소스 제한과 AudioContext의 고유한 Latency 문제로 인한 실제 악기 구현의 어려움 분석. 특히 대용량 샘플 파일 로드 시 발생하는 초기 로딩 지연과 볼륨 조정 시 발생하는 Audio Pop 현상이 주요 병목 지점으로 작용.
Technical Solution
- Additive Synthesis 대신 3옥타브 9개 지점의 WAV 샘플을 활용한 playbackRate 기반 Resampling 구조 채택
- GainNode Envelope를 통한 볼륨 조정으로 AudioBufferSourceNode의 직접 수정 시 발생하는 Click Noise 제거
- 서비스 워커 기반 PWA 환경에서 사용자가 연주하는 노트만 실시간으로 가져오는 Lazy-Caching 전략 적용
- MediaStreamDestination과 MediaRecorder를 결합하여 서버 없이 클라이언트 사이드에서 모든 녹음 및 믹싱 처리
- 설정 상태를 LZ-압축 후 Base64로 인코딩하여 Query String에 포함하는 경량 상태 공유 메커니즘 구현
- Chrome의 Direct MIDI Path를 활용하여 입력 지연을 최소화한 저지연 인터페이스 설계
실천 포인트
- 오디오 파라미터 변경 시 즉각적인 값 수정 대신 Exponential Ramp를 사용하여 오디오 글리치 방지 - 초기 로딩 성능 최적화를 위해 전체 에셋 대신 사용자 인터랙션 기반의 Lazy-Loading 캐싱 전략 검토 - 서버 저장소 비용 절감을 위해 단순 설정값은 압축 후 URL 파라미터로 전달하는 상태 관리 방식 고려