Beat Sequencer

이 실험에 대해

정확한 타이밍을 위해 AudioContext.currentTime을 기준으로 미리 스케줄링하는 lookahead 패턴을 사용한다. setInterval로 25ms마다 스케줄러를 깨워 100ms 앞의 스텝을 미리 예약한다. 각 드럼 소리는 오디오 파일 없이 순수 합성으로 만든다: KICK은 주파수 스윕, SNARE는 화이트 노이즈 + 오실레이터, HI-HAT은 고역통과 필터 화이트 노이즈, PERC는 랜덤 피치 사인파.

핵심 코드

// Lookahead 스케줄링 패턴
const LOOKAHEAD_MS = 25     // 스케줄러 실행 주기
const SCHEDULE_AHEAD = 0.1  // 미리 예약할 시간(초)

function scheduler() {
  const spStep = (60 / bpm) / 4  // 16분음표 간격
  while (nextStepTime < ctx.currentTime + SCHEDULE_AHEAD) {
    scheduleStep(currentStep, nextStepTime)
    nextStepTime += spStep
    currentStep = (currentStep + 1) % 16
  }
}
setInterval(scheduler, LOOKAHEAD_MS)

// KICK: 주파수 스윕으로 펀치감 생성
function playKick(ctx, time, master) {
  const osc = ctx.createOscillator()
  const gain = ctx.createGain()
  osc.frequency.setValueAtTime(150, time)
  osc.frequency.exponentialRampToValueAtTime(40, time + 0.2)
  gain.gain.setValueAtTime(1, time)
  gain.gain.exponentialRampToValueAtTime(0.001, time + 0.3)
  osc.connect(gain); gain.connect(master)
  osc.start(time); osc.stop(time + 0.35)
}