100KB 미만으로 구현한 6ms 초저지연 Web Audio 합성기

How keystrum turns a QWERTY keyboard into a 6-chord strum machine

red blue2026년 4월 27일3분intermediate

AI 요약

Context

기존 가상 악기들이 샘플 기반 방식으로 인해 발생하는 5~50MB의 대용량 리소스와 디스크 디코딩에 따른 Attack-time Latency 문제를 분석.

Karplus-Strong Synthesis 도입을 통한 샘플리스(Sample-less) 물리 모델링 구현
AudioWorklet 기반의 저수준 프로세싱으로 메인 스레드 간섭 없는 실시간 오디오 렌더링 달성
90ms 윈도우 기반의 Strum Detection 로직을 설계하여 개별 노트 입력과 코드 스트럼 의도를 구분하는 상태 기반 필터링 적용
Delay Line과 Low-pass Filter(0.5 averaging) 및 Decay Factor(0.996)를 조합한 효율적인 현악기 파형 시뮬레이션
QWERTY 키보드의 행과 열 구조를 코드 및 스트럼 레인으로 매핑한 입력 아키텍처 설계

실천 포인트

1. 고성능 실시간 처리가 필요한 프론트엔드 기능 설계 시 AudioWorklet과 같은 전용 스레드 활용 검토

2. 사용자 입력의 '의도(Intent)'를 구분하기 위해 시간 윈도우 기반의 버퍼링 및 임계값(Threshold) 설정 적용

3. 대용량 에셋 전송 비용이 병목일 경우 이를 생성하는 알고리즘으로 대체 가능한지 검토

태그