오디오 신디사이저 기초

소리는 공기 압력의 진동이고, 컴퓨터는 이를 초당 수만 개의 숫자(샘플)로 저장·재생한다. 브라우저에는 이를 직접 코드로 만들어낼 수 있는 Web Audio API가 내장되어 있다. OscillatorNode가 파형을 만들고, GainNode가 음량을 시간에 따라 조절하며, AnalyserNode로 실시간 파형을 눈으로 확인할 수 있다. 아래에서 직접 소리를 만들어보자.

파형 & 실시간 오실로스코프

파형

주파수 440 Hz

ADSR 엔벨로프

Attack 0.05s Decay 0.20s Sustain 0.60 Release 0.50s

Attack

Decay

Sustain

Release

미니 피아노 — 눌러서 노트 On/Off 체험

건반을 누르면(mousedown) 오실레이터가 시작되며 게인이 Attack → Decay → Sustain 순서로 올라가고, 손을 떼면(mouseup) 현재 게인 값에서 Release 구간을 따라 0으로 줄어든 뒤 오실레이터가 정지한다. 갑자기 0으로 끊으면 "딸깍" 클릭 잡음이 나기 때문에, 실제 신디사이저도 항상 이렇게 부드러운 램프로 음량을 바꾼다.

// 노트를 켤 때 — Attack → Decay → Sustain const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = 'sine'; osc.frequency.value = freq; osc.connect(gain).connect(ctx.destination); const t = ctx.currentTime; gain.gain.setValueAtTime(0, t); gain.gain.linearRampToValueAtTime(1, t + attack); // Attack gain.gain.linearRampToValueAtTime(sustain, t + attack + decay); // Decay → Sustain osc.start(t); // 노트를 뗄 때 — 현재 값에서 Release 구간만큼 감쇠 const t2 = ctx.currentTime; gain.gain.cancelScheduledValues(t2); gain.gain.setValueAtTime(gain.gain.value, t2); gain.gain.linearRampToValueAtTime(0, t2 + release); osc.stop(t2 + release + 0.05);

왜 테스트 톤 버튼을 눌러야만 소리가 날까? — 브라우저의 자동재생 정책(Autoplay Policy) 때문에 AudioContext는 사용자의 클릭 같은 제스처 이후에만 생성·재생이 허용된다. 페이지가 열리자마자 몰래 소리를 내는 광고를 막기 위한 장치다.