피드로 돌아가기
Dev.toFrontend
원문 읽기
350라인으로 구현한 Web Audio 기반 정밀 음정 훈련 시스템
A Browser Ear-Training Trainer in 350 Lines — Equal-Temperament Frequencies and Three Web Audio Footguns
AI 요약
Context
브라우저 환경에서 12-TET 기반의 정밀한 음정 훈련 도구를 구현함. Web Audio API의 비동기적 특성과 브라우저 오토플레이 정책으로 인한 사운드 출력 누락 및 파형 불연속성 문제를 해결해야 하는 상황.
Technical Solution
- 12-TET 수식(440 * 2^(n/12))을 통한 정밀 주파수 계산 및 NaN 가드를 통한 AudioThread 무음 드랍 방지
- 사용자 제스처 핸들러 내 AudioContext.resume() 호출로 브라우저 Autoplay 정책에 따른 Suspended 상태 해결
- ctx.currentTime에 12ms의 오프셋을 추가하여 스케줄링 지연으로 인한 첫 노트 누락 현상 제거
- Linear 및 Exponential Ramp를 결합한 ADSR Envelope 설계로 파형 불연속성에 의한 클릭 노이즈(Tic) 제거
- 절대 거리 기반 Modulo 12 연산을 적용하여 음악적 멘탈 모델에 부합하는 Interval Labeling 시스템 구축
- DOM 의존성을 제거한 독립적 Pitch 모듈 설계로 node --test 환경에서 21개의 유닛 테스트 검증
실천 포인트
- AudioContext 생성 시 반드시 사용자 상호작용 기반의 resume() 프로세스를 포함할 것 - osc.start() 호출 시 currentTime에 최소 10ms 이상의 여유 시간을 더해 스케줄링 안정성을 확보할 것 - exponentialRampToValueAtTime 사용 시 target value를 0이 아닌
0.0001과 같은 근사치로 설정할 것 - 오디오 파형의 갑작스러운 변화를 방지하기 위해 GainNode를 활용한 ADSR Envelope를 적용할 것