shigureni.dev

描くのと、鳴らすのは別の時計

再生ヘッドをフレームごとに一定値だけ足して動かすと、見た目は回る。けれど本物の音を鳴らすとなると、これではリズムがよれる。フレームの間隔は一定でない。重い処理が挟まればカクつき、別タブに行けば止まる。その不安定な時計で「いま鳴らせ」を判断すると、発音のタイミングが揺れる。

描画クロックと音声クロックを別々に進めると、両者は時間とともにずれていく。下は同じステップ列の上を二本のヘッドが進む。上のヘッドはフレーム間隔がよれる描画クロックで、歩幅がばらつき、ときどき止まる。下のヘッドは一定の歩幅で進む音声クロック。上の印は通りかかったヘッドにつられて不規則に光り、下の印は時刻どおりに正確に光る。

const hits = [0, 4, 7, 8, 12]
const isHit = (i) => hits.includes(i)

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const steps = 16
  const cell = w / steps
  const drawY = h * 0.34
  const audioY = h * 0.72
  const r = Math.min(cell, h * 0.18) * 0.55

// 不安定な描画クロック（フレーム間隔がよれる想定）と、正確な音声クロック
  let drawT = 0
  let audioT = 0
  let frame = 0

c.fillStyle = colors.paper
  c.fillRect(0, 0, w, h)

return () => {
    c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)

// 描画クロックはフレームごとにばらつく歩幅で進む（時々止まる）
    frame += 1
    const jitter = 0.16 * (0.4 + 1.6 * Math.abs(Math.sin(frame * 1.7)))
    const stall = frame % 23 < 3 ? 0 : 1
    drawT += jitter * stall
    // 音声クロックは一定の歩幅で確実に進む
    audioT += 0.16

const drawHead = ((drawT % steps) + steps) % steps
    const audioHead = ((audioT % steps) + steps) % steps
    const audioStep = Math.floor(audioHead)

// 背景の格子（全幅・全高）。4マスごとに濃く
    for (let i = 0; i < steps; i++) {
      c.fillStyle = colors.tintAlpha(120, i % 4 === 0 ? 0.4 : 0.16)
      c.fillRect(i * cell + 1, 0, cell - 2, h)
    }

// 上レーン: 描画クロック。印は時刻どおりに光れず、ずれたヘッドが踏む
    for (let i = 0; i < steps; i++) {
      if (!isHit(i)) continue
      const lit = i === Math.floor(drawHead)
      c.fillStyle = lit ? colors.tint(45) : colors.tintAlpha(150, 0.5)
      c.beginPath()
      c.arc(i * cell + cell / 2, drawY, lit ? r * 1.25 : r, 0, Math.PI * 2)
      c.fill()
    }

// 下レーン: 音声クロック。先読みで予約済みの印が時刻どおりに正確に光る
    for (let i = 0; i < steps; i++) {
      if (!isHit(i)) continue
      const lit = i === audioStep
      c.fillStyle = lit ? colors.ink : colors.tint(80)
      c.beginPath()
      c.arc(i * cell + cell / 2, audioY, lit ? r * 1.25 : r, 0, Math.PI * 2)
      c.fill()
    }

// 二本のヘッド。上は揺れ、下は等速
    const dx = drawHead * cell
    c.strokeStyle = colors.tintAlpha(40, 0.6)
    c.lineWidth = 2
    c.beginPath()
    c.moveTo(dx, 0)
    c.lineTo(dx, drawY + r + h * 0.06)
    c.stroke()

const ax = audioHead * cell
    c.strokeStyle = colors.tint(20)
    c.lineWidth = 2
    c.beginPath()
    c.moveTo(ax, audioY - r - h * 0.06)
    c.lineTo(ax, h)
    c.stroke()
  }
}

上のヘッドは歩幅がばらついて時々止まり、下のヘッドから少しずつ離れていく。同じ列を進ませても、二本は時間とともにずれる。鳴らす印を描画クロックの位置で判定すると、このずれがそのままタイミングのよれになる。

音を扱うときは時計を二つに分ける。描画は requestAnimationFrame（rAF）で回り、これはモニタの都合で揺れる。発音は AudioContext が持つ専用の時計（currentTime）で測り、これは音声ハードウェアに直結していて正確。

先読みスケジューラ（look-ahead scheduler）の型を使う。rAF のループの中で、毎回少し先（たとえば 100ms 先）までを覗いて、その区間に来るべき音を AudioContext の正確な時刻に予約しておく。

// 25ms ごとに rAF/setInterval で呼ばれる想定
const lookahead = 0.1 // 何秒先までを予約するか
while (nextNoteTime < audioCtx.currentTime + lookahead) {
  scheduleNote(nextNoteTime) // 正確な時刻を渡して予約
  nextNoteTime += 60 / bpm / 4 // 次のステップへ
}

描く時計が多少よれても、予約済みの音は audio clock の通りに正確に鳴る。Chris Wilson の "A Tale of Two Clocks"（2013）で広まった定石。描画は揺れてよく、発音は揺らさない、という割り切り。