Step 5: 配乐音效与混音

.gitattributes

@@ -0,0 +1 @@
+audio/soundtrack.mp3 filter=lfs diff=lfs merge=lfs -text

README.md

@@ -60,7 +60,7 @@ pinned: false
 2. ✅ 生成中文旁白逐句音频 + 时间轴清单（`timeline.json`）。
 3. ✅ 程序化 3D 手部解剖模型：皮肤 / 骨骼 / 肌腱 / 腱鞘 / 关节骨架绑定 / 疼痛发光 / 器械与道具。
 4. ✅ 分镜时间轴：11 镜头 + 结尾的相机运动、姿态、图层、字幕、HUD。
-5. ⏳ 程序化音乐与音效、旁白混音、ducking。
+5. ✅ 程序化音乐与音效、旁白混音、ducking。
 6. ⏳ 播放器 UI（手机竖屏适配、全屏、进度条）+ MP4 本地导出（24/30/60fps）。
 7. ⏳ 四平台文案（标题 / 话题 / 正文，严格字数校验）+ 封面生成与下载。
 8. ⏳ 生产构建、检查，推送最终静态站点。
@@ -79,3 +79,4 @@ README.md                  ← 本文件（计划 + 进度）
 - [x] Step 1：计划与大纲完成
 - [x] Step 2：旁白 46 句逐句生成（zh-CN 神经网络语音，语速 +38%），自动裁剪静音并对齐时间轴，全片总长 **88.2 秒**（12 段）
 - [x] Step 3-4：程序化 3D 手部解剖模型（皮肤透视 / 骨骼 / 肌腱 / 腱鞘、疼痛红光、原创器械与生活道具）+ 12 段分镜时间轴（镜头运动、分屏、字幕、HUD、超声示意、截面图），全时间轴逐帧验证无运行错误
+- [x] Step 5：程序化配乐（紧张心跳前奏 → 小调解析 → 节奏推进 → 大调恢复）+ 10 类音效（疼痛脉冲、扫描、松解释放、提示音等，与画面事件逐帧对齐）+ 旁白自动闪避混音，离线渲染为 88.2 秒母带

audio/soundtrack.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:744e380816a7cd4b3090fd38a27e913328cf601083494e41235c69ed97cf20ba
+size 2118528

scripts/bake_audio.py

@@ -0,0 +1,18 @@
+"""Render the procedural soundtrack in headless Chromium and bake it to frontend/public/audio/soundtrack.mp3"""
+import asyncio, base64, lameenc
+from playwright.async_api import async_playwright
+URL = "http://localhost:5173/preview/production/ed5ba841-ed53-4eec-a8c5-93237d26b7ab/?adebug=1"
+async def main():
+    async with async_playwright() as p:
+        b = await p.chromium.launch()
+        pg = await b.new_page()
+        pg.on("console", lambda m: print(m.text[:300]) if "INFO" in m.text else None)
+        await pg.goto(URL)
+        await pg.wait_for_function("window.__done === true", timeout=300000)
+        pcm = base64.b64decode(await pg.evaluate("window.__pcm"))
+        await b.close()
+    enc = lameenc.Encoder(); enc.set_bit_rate(192); enc.set_in_sample_rate(48000); enc.set_channels(2); enc.set_quality(2)
+    mp3 = enc.encode(pcm) + enc.flush()
+    open("frontend/public/audio/soundtrack.mp3", "wb").write(mp3)
+    print("bytes", len(mp3))
+asyncio.run(main())

src/App.tsx

@@ -2,10 +2,12 @@ import { lazy, Suspense } from 'react'
 
 const Debug = lazy(() => import('./video/Debug'))
 const TDebug = lazy(() => import('./video/TDebug'))
+const ADebug = lazy(() => import('./video/ADebug'))
 
 export default function App() {
   const q = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null
   if (q?.has('debug')) return <Suspense fallback={null}><Debug /></Suspense>
   if (q?.has('tdebug')) return <Suspense fallback={null}><TDebug /></Suspense>
+  if (q?.has('adebug')) return <Suspense fallback={null}><ADebug /></Suspense>
   return <div style={{ color: '#fff' }}>loading</div>
 }

src/video/ADebug.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+import { getSoundtrack } from './audio'
+import { SHOTS } from './scenes'
+
+export default function ADebug() {
+  useEffect(() => {
+    const t0 = performance.now()
+    getSoundtrack(undefined, true).then(b => {
+      const d = b.getChannelData(0)
+      const rms = SHOTS.map(s => {
+        let a = 0, pk = 0; const i0 = Math.floor(s.start * b.sampleRate), i1 = Math.floor(s.end * b.sampleRate)
+        for (let i = i0; i < i1; i++) { a += d[i] * d[i]; pk = Math.max(pk, Math.abs(d[i])) }
+        return `${s.index}:${Math.sqrt(a / (i1 - i0)).toFixed(3)}/${pk.toFixed(2)}`
+      })
+      const L = b.getChannelData(0), R = b.getChannelData(1), pcm = new Int16Array(L.length * 2)
+      for (let i = 0; i < L.length; i++) { pcm[2 * i] = Math.max(-1, Math.min(1, L[i])) * 32767; pcm[2 * i + 1] = Math.max(-1, Math.min(1, R[i])) * 32767 }
+      const u8 = new Uint8Array(pcm.buffer); let bin = ''
+      for (let i = 0; i < u8.length; i += 0x8000) bin += String.fromCharCode(...u8.subarray(i, i + 0x8000))
+      ;(window as unknown as { __pcm: string }).__pcm = btoa(bin)
+      console.log('INFO dur=' + b.duration.toFixed(2) + ' ms=' + (performance.now() - t0).toFixed(0) + ' ' + rms.join(' '))
+    }).catch(e => console.log('INFO ERROR ' + e)).finally(() => { (window as unknown as { __done: boolean }).__done = true })
+  }, [])
+  return null
+}

src/video/TDebug.tsx

@@ -14,7 +14,7 @@ export default function TDebug() {
     for (const t of ts) {
       try {
         const t0 = performance.now()
-        eng.render(frameAt(t), ctx, t, { w: 540, h: 960 })
+        eng.render(frameAt(t), ctx, t)
         const ms = performance.now() - t0
         const d = ctx.getImageData(0, 0, 540, 960).data
         let sum = 0, red = 0, skin = 0

src/video/audio.ts

@@ -0,0 +1,278 @@
+import { DURATION, LINES, SHOTS, soundCues, type CueKind } from './scenes'
+
+export const SR = 48000
+const BPM = 100
+const BEAT = 60 / BPM
+const BAR = BEAT * 4
+
+type Ctx = OfflineAudioContext
+
+const midi = (m: number) => 440 * Math.pow(2, (m - 69) / 12)
+
+function noiseBuffer(ctx: Ctx, sec: number) {
+  const b = ctx.createBuffer(1, Math.ceil(sec * ctx.sampleRate), ctx.sampleRate)
+  const d = b.getChannelData(0)
+  let s = 1234567
+  for (let i = 0; i < d.length; i++) { s = (s * 16807) % 2147483647; d[i] = (s / 2147483647) * 2 - 1 }
+  return b
+}
+
+function impulse(ctx: Ctx, sec: number, decay: number) {
+  const n = Math.ceil(sec * ctx.sampleRate)
+  const b = ctx.createBuffer(2, n, ctx.sampleRate)
+  let s = 98765
+  for (let c = 0; c < 2; c++) {
+    const d = b.getChannelData(c)
+    for (let i = 0; i < n; i++) { s = (s * 16807) % 2147483647; d[i] = ((s / 2147483647) * 2 - 1) * Math.pow(1 - i / n, decay) }
+  }
+  return b
+}
+
+function env(g: GainNode, t: number, a: number, peak: number, hold: number, r: number) {
+  g.gain.setValueAtTime(0, t)
+  g.gain.linearRampToValueAtTime(peak, t + a)
+  g.gain.setValueAtTime(peak, t + a + hold)
+  g.gain.exponentialRampToValueAtTime(0.0001, t + a + hold + r)
+}
+
+/* ---------------- music ---------------- */
+// sections: [start, end, chords(midi roots+voicing), mood]
+interface Section { a: number; b: number; chords: number[][]; arp: boolean; kick: boolean; bright: number }
+
+function sections(): Section[] {
+  const S = (i: number) => SHOTS[i].start
+  const minor = [[50, 57, 60, 64, 65], [46, 53, 57, 60, 62], [43, 50, 53, 58, 62], [45, 52, 57, 59, 64]] // Dm9 Bbmaj7 Gm9 Asus
+  const tense = [[38, 50, 53, 57], [38, 50, 52, 57]]
+  const major = [[41, 53, 57, 60, 64], [48, 55, 60, 64, 67], [50, 57, 60, 62, 65], [46, 53, 58, 62, 65]] // Fmaj7 C Dm Bb
+  return [
+    { a: 0, b: S(1), chords: tense, arp: false, kick: false, bright: 0.2 },
+    { a: S(1), b: S(4), chords: minor, arp: true, kick: false, bright: 0.45 },
+    { a: S(4), b: S(8), chords: minor, arp: true, kick: true, bright: 0.6 },
+    { a: S(8), b: DURATION, chords: major, arp: true, kick: true, bright: 0.85 },
+  ]
+}
+
+function music(ctx: Ctx, out: AudioNode, rev: AudioNode) {
+  const secs = sections()
+  const nb = noiseBuffer(ctx, 1)
+  for (const s of secs) {
+    const nBars = Math.ceil((s.b - s.a) / BAR)
+    for (let k = 0; k < nBars; k++) {
+      const t0 = s.a + k * BAR
+      if (t0 >= s.b) break
+      const len = Math.min(BAR, s.b - t0) + 0.6
+      const ch = s.chords[k % s.chords.length]
+      // pad
+      ch.forEach((m, vi) => {
+        for (const det of [-7, 7]) {
+          const o = ctx.createOscillator(); o.type = vi === 0 ? 'sine' : 'sawtooth'
+          o.frequency.value = midi(vi === 0 ? m - 12 : m); o.detune.value = det
+          const f = ctx.createBiquadFilter(); f.type = 'lowpass'
+          f.frequency.setValueAtTime(500 + 900 * s.bright, t0)
+          f.frequency.linearRampToValueAtTime(900 + 1600 * s.bright, t0 + len * 0.6)
+          const g = ctx.createGain()
+          env(g, t0, 0.5, vi === 0 ? 0.11 : 0.028, len - 1.1, 0.9)
+          o.connect(f).connect(g); g.connect(out); g.connect(rev)
+          o.start(t0); o.stop(t0 + len + 0.3)
+        }
+      })
+      // arpeggio pluck (16ths in later sections, 8ths in middle)
+      if (s.arp) {
+        const step = s.kick ? BEAT / 4 : BEAT / 2
+        const notes = ch.slice(1).concat(ch.slice(1).map(x => x + 12))
+        const pat = [0, 2, 1, 3, 2, 4, 3, 5]
+        for (let i = 0; i * step < BAR && t0 + i * step < s.b; i++) {
+          const t = t0 + i * step
+          const m = notes[pat[i % pat.length] % notes.length]
+          const o = ctx.createOscillator(); o.type = 'triangle'; o.frequency.value = midi(m + 12)
+          const g = ctx.createGain(); env(g, t, 0.004, (i % 4 === 0 ? 0.05 : 0.032) * (0.7 + s.bright * 0.4), 0.02, step * 1.6)
+          const p = ctx.createStereoPanner(); p.pan.value = Math.sin(i * 1.3) * 0.5
+          o.connect(g).connect(p); p.connect(out); p.connect(rev)
+          o.start(t); o.stop(t + step * 2 + 0.1)
+        }
+      }
+      // heartbeat in the tense intro
+      if (!s.arp) {
+        for (let b = 0; b < 4; b += 2) for (const off of [0, 0.22]) {
+          const t = t0 + b * BEAT + off
+          if (t > s.b) continue
+          const o = ctx.createOscillator(); o.frequency.setValueAtTime(70, t); o.frequency.exponentialRampToValueAtTime(38, t + 0.18)
+          const g = ctx.createGain(); env(g, t, 0.005, off ? 0.22 : 0.32, 0.02, 0.25)
+          o.connect(g).connect(out); o.start(t); o.stop(t + 0.35)
+        }
+      }
+      // soft kick + hat
+      if (s.kick) {
+        for (let b = 0; b < 4; b++) {
+          const t = t0 + b * BEAT
+          if (t > s.b) continue
+          const o = ctx.createOscillator(); o.frequency.setValueAtTime(120, t); o.frequency.exponentialRampToValueAtTime(42, t + 0.12)
+          const g = ctx.createGain(); env(g, t, 0.003, 0.26, 0.01, 0.22)
+          o.connect(g).connect(out); o.start(t); o.stop(t + 0.3)
+          const h = ctx.createBufferSource(); h.buffer = nb
+          const hf = ctx.createBiquadFilter(); hf.type = 'highpass'; hf.frequency.value = 7000
+          const hg = ctx.createGain(); env(hg, t + BEAT / 2, 0.002, 0.035, 0, 0.05)
+          h.connect(hf).connect(hg).connect(out); h.start(t + BEAT / 2, ((k * 4 + b) % 5) * 0.1, 0.1)
+        }
+      }
+    }
+  }
+  // final resolve chord swell
+  const tf = SHOTS[SHOTS.length - 1].start + 0.4
+  ;[41, 53, 60, 65, 69, 72].forEach(m => {
+    const o = ctx.createOscillator(); o.type = 'sine'; o.frequency.value = midi(m)
+    const g = ctx.createGain(); env(g, tf, 0.8, 0.05, 2, Math.max(0.5, DURATION - tf - 2.8))
+    o.connect(g); g.connect(out); g.connect(rev); o.start(tf); o.stop(DURATION)
+  })
+}
+
+/* ---------------- sfx ---------------- */
+function sfx(ctx: Ctx, out: AudioNode, rev: AudioNode) {
+  const nb = noiseBuffer(ctx, 2)
+  const noise = (t: number, dur: number) => { const s = ctx.createBufferSource(); s.buffer = nb; s.start(t, 0, dur); return s }
+  const tone = (t: number, type: OscillatorType, f0: number, f1: number, dur: number) => {
+    const o = ctx.createOscillator(); o.type = type
+    o.frequency.setValueAtTime(f0, t); o.frequency.exponentialRampToValueAtTime(f1, t + dur)
+    o.start(t); o.stop(t + dur + 0.05); return o
+  }
+  const make: Record<CueKind, (t: number, v: number) => void> = {
+    whoosh: (t, v) => {
+      const s = noise(t, 0.6), f = ctx.createBiquadFilter(); f.type = 'bandpass'; f.Q.value = 2
+      f.frequency.setValueAtTime(300, t); f.frequency.exponentialRampToValueAtTime(3500, t + 0.45)
+      const g = ctx.createGain(); env(g, t, 0.25, 0.22 * v, 0, 0.3)
+      s.connect(f).connect(g); g.connect(out); g.connect(rev)
+    },
+    pain: (t, v) => {
+      const o = tone(t, 'sawtooth', 110, 55, 0.5), f = ctx.createBiquadFilter(); f.type = 'lowpass'; f.frequency.value = 600
+      const g = ctx.createGain(); env(g, t, 0.01, 0.2 * v, 0.05, 0.45)
+      o.connect(f).connect(g).connect(out)
+      const o2 = tone(t, 'sine', 80, 40, 0.4), g2 = ctx.createGain(); env(g2, t, 0.005, 0.4 * v, 0.02, 0.35)
+      o2.connect(g2).connect(out)
+      const o3 = tone(t + 0.02, 'sine', 1900, 1500, 0.35), g3 = ctx.createGain(); env(g3, t + 0.02, 0.01, 0.03 * v, 0, 0.3)
+      o3.connect(g3); g3.connect(out); g3.connect(rev)
+    },
+    tick: (t, v) => { const o = tone(t, 'sine', 2400, 2300, 0.04), g = ctx.createGain(); env(g, t, 0.002, 0.08 * v, 0, 0.04); o.connect(g).connect(out) },
+    scan: (t, v) => {
+      const o = tone(t, 'sine', 500, 1800, 0.8), g = ctx.createGain(); env(g, t, 0.05, 0.06 * v, 0.4, 0.35)
+      const lfo = ctx.createOscillator(); lfo.frequency.value = 18; const lg = ctx.createGain(); lg.gain.value = 0.03 * v
+      lfo.connect(lg).connect(g.gain); lfo.start(t); lfo.stop(t + 0.9)
+      o.connect(g); g.connect(out); g.connect(rev)
+    },
+    pop: (t, v) => { const o = tone(t, 'sine', 520, 980, 0.08), g = ctx.createGain(); env(g, t, 0.003, 0.12 * v, 0, 0.12); o.connect(g); g.connect(out); g.connect(rev) },
+    release: (t, v) => {
+      const s = noise(t, 1.2), f = ctx.createBiquadFilter(); f.type = 'lowpass'
+      f.frequency.setValueAtTime(2500, t); f.frequency.exponentialRampToValueAtTime(200, t + 1.1)
+      const g = ctx.createGain(); env(g, t, 0.02, 0.12 * v, 0.05, 1.0)
+      s.connect(f).connect(g); g.connect(out); g.connect(rev)
+      ;[72, 76, 79, 84].forEach((m, i) => {
+        const o = tone(t + i * 0.07, 'sine', midi(m), midi(m) * 0.998, 1.4), gg = ctx.createGain()
+        env(gg, t + i * 0.07, 0.01, 0.05 * v, 0, 1.3); o.connect(gg); gg.connect(out); gg.connect(rev)
+      })
+    },
+    chime: (t, v) => {
+      for (const [r, a] of [[1, 1], [2.76, 0.5], [5.4, 0.25]]) {
+        const o = tone(t, 'sine', 880 * r, 880 * r, 1.6), g = ctx.createGain(); env(g, t, 0.003, 0.06 * v * a, 0, 1.5)
+        o.connect(g); g.connect(out); g.connect(rev)
+      }
+    },
+    thud: (t, v) => { const o = tone(t, 'sine', 90, 38, 0.3), g = ctx.createGain(); env(g, t, 0.003, 0.45 * v, 0.02, 0.3); o.connect(g).connect(out) },
+    click: (t, v) => {
+      const o = tone(t, 'square', 1600, 1200, 0.02), g = ctx.createGain(); env(g, t, 0.001, 0.04 * v, 0, 0.03); o.connect(g).connect(out)
+      const s = noise(t, 0.04), f = ctx.createBiquadFilter(); f.type = 'highpass'; f.frequency.value = 3000
+      const g2 = ctx.createGain(); env(g2, t, 0.001, 0.08 * v, 0, 0.03); s.connect(f).connect(g2).connect(out)
+    },
+    swipe: (t, v) => {
+      const s = noise(t, 0.3), f = ctx.createBiquadFilter(); f.type = 'highpass'
+      f.frequency.setValueAtTime(1200, t); f.frequency.linearRampToValueAtTime(4000, t + 0.25)
+      const g = ctx.createGain(); env(g, t, 0.06, 0.1 * v, 0, 0.2); s.connect(f).connect(g).connect(out)
+    },
+  }
+  for (const c of soundCues()) if (c.t >= 0 && c.t < DURATION) make[c.k](c.t, c.v ?? 1)
+}
+
+/* ---------------- narration ---------------- */
+async function loadVoices(base: string, onProgress?: (p: number) => void) {
+  const tmp = new OfflineAudioContext(1, 1, SR)
+  let done = 0
+  return Promise.all(LINES.map(async l => {
+    const r = await fetch(base + 'audio/' + l.file)
+    if (!r.ok) throw new Error('voice ' + l.file + ' ' + r.status)
+    const buf = await tmp.decodeAudioData(await r.arrayBuffer())
+    onProgress?.(++done / LINES.length)
+    return { l, buf }
+  }))
+}
+
+let cached: Promise<AudioBuffer> | null = null
+
+/** Full mixed soundtrack (narration + music + sfx), cached */
+export function getSoundtrack(onProgress?: (p: number, label: string) => void, synth = false) {
+  if (!cached) cached = (synth ? build(onProgress) : baked(onProgress).catch(() => build(onProgress))).catch(e => { cached = null; throw e })
+  return cached
+}
+
+/** Pre-baked master (same mix, rendered once) — fast path */
+async function baked(onProgress?: (p: number, label: string) => void) {
+  const base = (import.meta.env.BASE_URL || './').replace(/\/?$/, '/')
+  onProgress?.(0.1, '加载配乐')
+  const r = await fetch(base + 'audio/soundtrack.mp3')
+  if (!r.ok) throw new Error('soundtrack ' + r.status)
+  const ab = await r.arrayBuffer()
+  onProgress?.(0.6, '解码音频')
+  const ctx = new OfflineAudioContext(2, 1, SR)
+  const buf = await ctx.decodeAudioData(ab)
+  onProgress?.(1, '完成')
+  return buf
+}
+
+async function build(onProgress?: (p: number, label: string) => void) {
+  const base = (import.meta.env.BASE_URL || './').replace(/\/?$/, '/')
+  const voices = await loadVoices(base, p => onProgress?.(p * 0.6, '加载旁白'))
+  onProgress?.(0.65, '合成配乐')
+  const ctx = new OfflineAudioContext(2, Math.ceil(DURATION * SR), SR)
+  const master = ctx.createGain(); master.gain.value = 0.9
+  const comp = ctx.createDynamicsCompressor()
+  comp.threshold.value = -10; comp.knee.value = 6; comp.ratio.value = 8; comp.attack.value = 0.003; comp.release.value = 0.15
+  master.connect(comp).connect(ctx.destination)
+  master.gain.setValueAtTime(0.9, DURATION - 1.2); master.gain.linearRampToValueAtTime(0, DURATION)
+
+  const rev = ctx.createConvolver(); rev.buffer = impulse(ctx, 2.6, 3)
+  const revG = ctx.createGain(); revG.gain.value = 0.35
+  rev.connect(revG).connect(master)
+
+  // music bus with narration ducking
+  const mus = ctx.createGain(); mus.connect(master)
+  const musRev = ctx.createGain(); musRev.connect(rev)
+  const base0 = 0.85, duck = 0.38
+  for (const g of [mus.gain, musRev.gain]) {
+    g.setValueAtTime(0, 0); g.linearRampToValueAtTime(base0, 1.2)
+    const iv: [number, number][] = []
+    for (const { l } of voices) {
+      const a = l.start, b = l.start + l.dur, last = iv[iv.length - 1]
+      if (last && a - last[1] < 0.5) last[1] = Math.max(last[1], b); else iv.push([a, b])
+    }
+    for (const [a, b] of iv) {
+      g.setTargetAtTime(duck, Math.max(0, a - 0.12), 0.06)
+      g.setTargetAtTime(base0, b + 0.05, 0.25)
+    }
+  }
+  music(ctx, mus, musRev)
+
+  const fx = ctx.createGain(); fx.gain.value = 0.9; fx.connect(master)
+  sfx(ctx, fx, rev)
+
+  // narration with light EQ presence
+  const vo = ctx.createGain(); vo.gain.value = 1.15
+  const hp = ctx.createBiquadFilter(); hp.type = 'highpass'; hp.frequency.value = 90
+  const pres = ctx.createBiquadFilter(); pres.type = 'peaking'; pres.frequency.value = 3000; pres.gain.value = 2.5; pres.Q.value = 0.8
+  vo.connect(hp).connect(pres).connect(master)
+  const voRev = ctx.createGain(); voRev.gain.value = 0.06; vo.connect(voRev).connect(rev)
+  for (const { l, buf } of voices) {
+    const s = ctx.createBufferSource(); s.buffer = buf
+    s.connect(vo)
+    s.start(l.start, l.off, Math.min(l.dur, buf.duration - l.off))
+  }
+  const out = await ctx.startRendering()
+  onProgress?.(1, '完成')
+  return out
+}

src/video/exporter.ts

@@ -0,0 +1,69 @@
+import {
+  Output, Mp4OutputFormat, BufferTarget, CanvasSource, AudioBufferSource,
+  getFirstEncodableVideoCodec, getFirstEncodableAudioCodec,
+} from 'mediabunny'
+import { Engine, LW, LH } from './engine'
+import { frameAt, DURATION } from './scenes'
+import { getSoundtrack } from './audio'
+
+export type Fps = 24 | 30 | 60
+
+export interface ExportProgress { phase: string; p: number; frame?: number; total?: number; eta?: number }
+
+export async function exportMp4(fps: Fps, onProgress: (e: ExportProgress) => void, signal: AbortSignal): Promise<Blob> {
+  if (typeof VideoEncoder === 'undefined') throw new Error('当前浏览器不支持本地视频编码，请使用最新版 Chrome / Edge / Safari 17+')
+  const W = LW, H = LH
+  const bitrate = fps === 60 ? 16e6 : fps === 30 ? 12e6 : 10e6
+  const vcodec = await getFirstEncodableVideoCodec(['avc', 'hevc', 'vp9', 'av1'], { width: W, height: H, bitrate })
+  if (!vcodec) throw new Error('当前设备无法编码 1080×1920 视频')
+  onProgress({ phase: '准备音轨', p: 0 })
+  const sound = await getSoundtrack((p, l) => onProgress({ phase: l, p: p * 0.03 }))
+  const acodec = await getFirstEncodableAudioCodec(['aac', 'opus'], { numberOfChannels: 2, sampleRate: sound.sampleRate, bitrate: 192e3 })
+
+  const canvas = document.createElement('canvas'); canvas.width = W; canvas.height = H
+  const ctx = canvas.getContext('2d', { alpha: false })!
+  const eng = new Engine(); eng.setSize(W, H)
+
+  const output = new Output({ format: new Mp4OutputFormat({ fastStart: 'in-memory' }), target: new BufferTarget() })
+  const video = new CanvasSource(canvas, { codec: vcodec, bitrate, keyFrameInterval: 2 })
+  output.addVideoTrack(video, { frameRate: fps })
+  let audio: AudioBufferSource | null = null
+  if (acodec) { audio = new AudioBufferSource({ codec: acodec, bitrate: 192e3 }); output.addAudioTrack(audio) }
+  await output.start()
+
+  if (audio) {
+    // trim/pad to exact film length
+    const n = Math.round(DURATION * sound.sampleRate)
+    const ab = new AudioBuffer({ length: n, numberOfChannels: 2, sampleRate: sound.sampleRate })
+    for (let c = 0; c < 2; c++) ab.copyToChannel(sound.getChannelData(Math.min(c, sound.numberOfChannels - 1)).subarray(0, n), c)
+    await audio.add(ab); audio.close()
+  }
+
+  const total = Math.floor(DURATION * fps)
+  const t0 = performance.now()
+  try {
+    for (let i = 0; i < total; i++) {
+      if (signal.aborted) throw new DOMException('cancelled', 'AbortError')
+      const t = i / fps
+      eng.render(frameAt(t), ctx, t)
+      await video.add(t, 1 / fps)
+      if (i % 6 === 0 || i === total - 1) {
+        const el = (performance.now() - t0) / 1000
+        const p = (i + 1) / total
+        onProgress({ phase: '逐帧渲染编码', p: 0.03 + p * 0.95, frame: i + 1, total, eta: el / p * (1 - p) })
+        await new Promise(r => setTimeout(r, 0))
+      }
+    }
+    video.close()
+    onProgress({ phase: '封装 MP4', p: 0.99 })
+    await output.finalize()
+  } catch (e) {
+    await output.cancel().catch(() => {})
+    eng.renderer.dispose()
+    throw e
+  }
+  eng.renderer.dispose()
+  const buf = (output.target as BufferTarget).buffer!
+  onProgress({ phase: '完成', p: 1 })
+  return new Blob([buf], { type: 'video/mp4' })
+}