shigureni.dev

ADSR — 音量の輪郭

波形そのものは速い振動。音にはもう一段ゆっくりした層がある。鳴り始めてから消えるまでの音量の変化。エンベロープは四つの区間に分かれる。Attack（立ち上がり）、Decay（落ち込み）、Sustain（持続）、Release（減衰）の頭文字で ADSR。

ADSR は音量エンベロープを四つの直線区間で近似するモデル。Attack で 0 から最大へ立ち上がり、Decay で Sustain の高さまで落ち、鍵盤を押しているあいだ Sustain を保ち、離した瞬間（gate）から Release で 0 へ減衰する。同じ波形でも、この立ち上がりと消え方が違うと別の楽器に聞こえる。ピアノは速い Attack と短い Release で打って消える音、弦やパッドは遅い Attack でふわりと立ち上がる音になる。Moog のシンセが普及させた仕組みで、WebAudio では gain.gain.linearRampToValueAtTime(...) を四回呼んでこの折れ線を引く。

エンベロープは経過時間 e を受け取って、その瞬間の音量（0〜1）を返す一本の関数。区間ごとに if で分岐し、ADSR の四区間がそのまま四本の式になる。a の手前は e / a で 0 から 1 へ、a + d までは 1 から s へ落ち、gate までは s を保ち、gate 以降は s から 0 へ向かう。a を短くすると角が鋭く、長くするとなだらかになる。横軸に時間を取って一本の線で引くと、山ができて、肩で一段下がり、平らに伸びて、最後に落ちる折れ線が出る。下は a d s を時間でゆっくり動かして、折れ線の四区間が伸び縮みする。

const env = (e, a, d, s, gate, r) => {
  if (e < a) return e / a
  if (e < a + d) return 1 - (1 - s) * ((e - a) / d)
  if (e < gate) return s
  const rel = (e - gate) / r
  return rel >= 1 ? 0 : s * (1 - rel)
}

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const base = h - 16
  const top = 16
  const gate = 0.62
  const total = gate + 0.3
  let phase = 0

return () => {
    phase += 0.012
    const a = 0.06 + (Math.sin(phase) * 0.5 + 0.5) * 0.18
    const d = 0.06 + (Math.sin(phase * 1.3 + 1) * 0.5 + 0.5) * 0.16
    const s = 0.3 + (Math.sin(phase * 0.8 + 2) * 0.5 + 0.5) * 0.5
    const r = 0.22

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

c.strokeStyle = colors.tintAlpha(0, 0.1)
    c.lineWidth = 1
    c.beginPath()
    c.moveTo(0, base)
    c.lineTo(w, base)
    c.stroke()

c.strokeStyle = colors.tint(28)
    c.lineWidth = 1.8
    c.beginPath()
    for (let x = 0; x <= w; x++) {
      const e = (x / w) * total
      const py = base - env(e, a, d, s, gate, r) * (base - top)
      if (x === 0) c.moveTo(x, py)
      else c.lineTo(x, py)
    }
    c.stroke()

const marks = [a, a + d, gate, gate + r]
    c.fillStyle = colors.tint(80)
    for (let m = 0; m < marks.length; m++) {
      const e = Math.min(total, marks[m])
      const mx = (e / total) * w
      const my = base - env(e, a, d, s, gate, r) * (base - top)
      c.beginPath()
      c.arc(mx, my, 4, 0, Math.PI * 2)
      c.fill()
    }
  }
}

四つの点が区間の継ぎ目。一つ目が Attack の頂点、二つ目が Decay の底、三つ目が gate（鍵盤を離す時刻）、四つ目が Release で 0 に着く所。a が伸びると最初の坂が寝て頂点が右へ動き、s が上下すると平らな持続の高さが変わる。区間の長さと高さだけで音量の輪郭が決まる。

音は鳴り続けるのでなく、押すたびに新しい音符として鳴り始める。エンベロープを毎フレーム右端に一サンプルずつ書き足し、配列全体を一つ左へずらすと、輪郭がオシロスコープのように右から左へ流れる。一音が終端に達したら経過時間をリセットして次の音を撃ち直す。下では右端の点が現在の音量、その左に過去の輪郭が積もる。

const clamp01 = (v) => (v < 0 ? 0 : v > 1 ? 1 : v)

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const base = h - 16
  const top = 16
  const a = 0.07
  const d = 0.1
  const s = 0.5
  const r = 0.28
  const samples = new Float32Array(w)
  let elapsed = 0
  let gate = 0.55
  let total = gate + r + 0.06

return () => {
    elapsed += 0.01
    if (elapsed >= total) {
      elapsed = 0
      gate = 0.35 + Math.random() * 0.6
      total = gate + r + 0.06
    }
    const v = clamp01(env(elapsed, a, d, s, gate, r))

for (let i = 0; i < w - 1; i++) samples[i] = samples[i + 1]
    samples[w - 1] = v

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

c.strokeStyle = colors.tintAlpha(0, 0.1)
    c.lineWidth = 1
    c.beginPath()
    c.moveTo(0, base)
    c.lineTo(w, base)
    c.stroke()

c.strokeStyle = colors.tint(28)
    c.lineWidth = 1.8
    c.beginPath()
    for (let x = 0; x < w; x++) {
      const py = base - samples[x] * (base - top)
      if (x === 0) c.moveTo(x, py)
      else c.lineTo(x, py)
    }
    c.stroke()

const headY = base - samples[w - 1] * (base - top)
    c.fillStyle = colors.tint(8)
    c.beginPath()
    c.arc(w - 2, headY, 3, 0, Math.PI * 2)
    c.fill()
  }
}

山が一つずつ流れていく。gate の長さを毎回変えているので、持続の平らな部分が音ごとに伸び縮みする。右端の点が今まさに鳴っている音量で、Attack で跳ね上がり、Decay で肩まで落ち、Sustain で平らに進み、Release で底まで滑り、次の音でまた跳ね上がる。