Step 4-7: 音乐音效混音 + 播放器 + MP4 导出 + 发布文案 + 封面

.gitattributes

@@ -0,0 +1,2 @@
+shouhouzi/covers/cover-landscape.png filter=lfs diff=lfs merge=lfs -text
+shouhouzi/covers/cover-portrait.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -25,10 +25,10 @@ pinned: false
 | 1 | 写计划 / 大纲 / 步骤（本文件） | ✅ 完成 |
 | 2 | 旁白文案定稿 + TTS 生成配音 + 时长表（15 场景 / 77 句 / 约 6 分钟，旁白+商人+助手三种声线） | ✅ 完成 |
 | 3 | 动画引擎 + 全部 15 个场景（横屏 16:9 / 竖屏 9:16 双布局，已用无头浏览器逐句截图验证） | ✅ 完成 |
-| 4 | 程序化音乐 + 音效 + 旁白混音（WebAudio 离线渲染） | ⏳ |
-| 5 | 播放器 UI + MP4 本地导出（24/30/60fps，横/竖屏） | ⏳ |
-| 6 | 抖音 / B站 发布文案（可一键复制） | ⏳ |
-| 7 | 横屏 / 竖屏封面图生成 | ⏳ |
+| 4 | 程序化音乐（9 种情绪段落）+ 30 余种合成音效 + 旁白闪避混音（OfflineAudioContext 分窗渲染，约 10 秒生成整条音轨） | ✅ 完成 |
+| 5 | 播放器 UI + MP4 本地导出（24/30/60fps，横/竖屏；H.264+AAC，无 H.264 时自动回退 VP9+Opus） | ✅ 完成 |
+| 6 | 抖音 / B站 发布文案（可一键复制，B站简介自动生成章节时间戳） | ✅ 完成 |
+| 7 | 横屏 1920×1080 / 竖屏 1080×1920 封面图（静态 PNG + 网页内重绘下载） | ✅ 完成 |
 | 8 | 无头浏览器自动化测试 + 修复 + 最终说明 | ⏳ |
 
 ---

shouhouzi/css/style.css

@@ -0,0 +1,85 @@
+@font-face { font-family: "KuaiLe"; src: url(../fonts/kuaile.woff2) format("woff2"); font-display: block; }
+:root { --ink: #2b2321; --paper: #fbf3e1; --gold: #ffcd3c; --red: #ff5b4f; --green: #38b86a; --blue: #4a8fe2; --card: #fffaf0; }
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body { margin: 0; background: #f3e7cc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 39.5h40M39.5 0v40' stroke='%23e6d6b3' stroke-width='1'/%3E%3C/svg%3E"); color: var(--ink); font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
+.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, env(safe-area-inset-left)); background: rgba(43,35,33,.94); color: #fff; flex-wrap: wrap; }
+.brand { display: flex; align-items: center; gap: 12px; }
+.logo { font-size: 38px; }
+.brand h1 { margin: 0; font-family: KuaiLe, sans-serif; font-weight: normal; color: var(--gold); font-size: 30px; letter-spacing: 2px; }
+.brand p { margin: 2px 0 0; font-size: 13px; opacity: .8; }
+nav a { color: #fff; text-decoration: none; margin-left: 14px; font-size: 14px; opacity: .85; }
+nav a:hover { opacity: 1; color: var(--gold); }
+main { max-width: 1180px; margin: 0 auto; padding: 18px 14px 40px; }
+.card { background: var(--card); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 6px 8px 0 rgba(43,35,33,.85); padding: 18px; margin-bottom: 26px; }
+h2 { font-family: KuaiLe, sans-serif; font-weight: normal; font-size: 26px; margin: 0 0 10px; display: flex; align-items: center; gap: 12px; }
+.muted { color: #7a6a5a; font-size: 14px; }
+.stage-wrap { display: flex; justify-content: center; background: #2b2321; border-radius: 12px; padding: 10px; }
+.stage { position: relative; width: 100%; aspect-ratio: 16/9; max-height: 76vh; }
+.stage.portrait { aspect-ratio: 9/16; width: auto; height: 76vh; max-width: 100%; }
+.stage canvas { width: 100%; height: 100%; display: block; border-radius: 8px; background: #fbf3e1; cursor: pointer; }
+.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(43,35,33,.82); color: #fff; border-radius: 8px; font-size: 16px; }
+.overlay .bar { width: 60%; height: 10px; background: rgba(255,255,255,.2); border-radius: 6px; overflow: hidden; }
+.overlay .bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; }
+.spinner { width: 46px; height: 46px; border: 6px solid rgba(255,255,255,.25); border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.bigplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 110px; height: 110px; border-radius: 50%; border: 5px solid var(--ink); background: var(--gold); font-size: 46px; cursor: pointer; box-shadow: 4px 6px 0 var(--ink); padding-left: 10px; }
+.hidden { display: none !important; }
+.controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
+.icon { width: 44px; height: 44px; border-radius: 12px; border: 3px solid var(--ink); background: #fff; font-size: 18px; cursor: pointer; flex: none; }
+.icon:hover { background: var(--gold); }
+.time { font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
+.seek { position: relative; flex: 1; height: 16px; background: #e8dcc2; border: 3px solid var(--ink); border-radius: 10px; cursor: pointer; touch-action: none; }
+.seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--red); border-radius: 6px; }
+.knob { position: absolute; top: 50%; width: 22px; height: 22px; background: #fff; border: 3px solid var(--ink); border-radius: 50%; transform: translate(-50%,-50%); left: 0; }
+.marks i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(43,35,33,.45); }
+.row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
+.seg { display: inline-flex; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; flex-wrap: wrap; }
+.seg button { border: 0; background: #fff; padding: 9px 14px; font-size: 14px; cursor: pointer; border-right: 2px solid var(--ink); }
+.seg button:last-child { border-right: 0; }
+.seg button.on { background: var(--gold); font-weight: bold; }
+.chk { font-size: 14px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; margin-top: 10px; }
+.chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
+.chapters button { border: 2px solid var(--ink); border-radius: 20px; background: #fff; padding: 5px 12px; font-size: 13px; cursor: pointer; }
+.chapters button.on { background: var(--ink); color: var(--gold); }
+.chapters button small { opacity: .6; margin-right: 4px; }
+.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 14px 0 4px; }
+.lbl { font-size: 13px; color: #7a6a5a; margin-bottom: 6px; }
+.primary { background: var(--red); color: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 12px 26px; font-size: 17px; font-weight: bold; cursor: pointer; box-shadow: 3px 4px 0 var(--ink); }
+.primary:disabled { opacity: .5; cursor: not-allowed; }
+.ghost, .btn { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 8px 14px; font-size: 14px; cursor: pointer; color: var(--ink); text-decoration: none; display: inline-block; }
+.btn:hover, .ghost:hover { background: var(--gold); }
+.btn.small { font-size: 13px; padding: 4px 10px; font-family: sans-serif; }
+.progress { position: relative; height: 30px; background: #eee2c8; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; margin-top: 14px; }
+.progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(45deg, var(--green), var(--green) 14px, #4fcb7e 14px, #4fcb7e 28px); }
+.progress span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; }
+#expResult { margin-top: 12px; }
+#expResult video { width: 100%; max-height: 60vh; border-radius: 10px; border: 3px solid var(--ink); background: #000; margin-top: 10px; }
+.note { margin-top: 12px; font-size: 13px; color: #7a6a5a; line-height: 1.7; }
+.note.warn { color: #b3261e; }
+.covers { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
+.covers figure { margin: 0; flex: 2 1 420px; }
+.covers figure.tall { flex: 1 1 200px; max-width: 300px; }
+.covers img { width: 100%; border: 3px solid var(--ink); border-radius: 12px; display: block; background: #eee; }
+.covers figcaption { font-size: 14px; margin-top: 8px; line-height: 2.2; }
+.pub-field { border: 2px dashed #c9b9a5; border-radius: 12px; padding: 10px 12px; margin-top: 12px; background: #fff; }
+.pub-field header { display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 14px; margin-bottom: 6px; }
+.pub-field pre { white-space: pre-wrap; word-break: break-word; margin: 0; font-family: inherit; font-size: 14px; line-height: 1.7; cursor: copy; }
+.pub-field .cnt { font-weight: normal; color: #998; font-size: 12px; margin-left: 8px; }
+.script h3 { font-family: KuaiLe, sans-serif; font-weight: normal; margin: 16px 0 6px; font-size: 20px; }
+.script p { margin: 4px 0; line-height: 1.8; font-size: 15px; }
+.script .who { display: inline-block; font-size: 12px; padding: 0 8px; border-radius: 8px; margin-right: 6px; color: #fff; }
+.script .who.m { background: #d9a400; } .script .who.a { background: #2c9c5c; }
+.script .ts { color: #aa9; font-size: 12px; margin-right: 6px; font-variant-numeric: tabular-nums; cursor: pointer; }
+footer { text-align: center; font-size: 12px; color: #7a6a5a; padding: 0 14px 30px; }
+.toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(120px); background: var(--ink); color: #fff; padding: 10px 20px; border-radius: 20px; transition: transform .25s; z-index: 50; font-size: 14px; }
+.toast.show { transform: translateX(-50%) translateY(0); }
+.stage:fullscreen { max-height: none; background: #000; display: flex; align-items: center; justify-content: center; }
+.stage:fullscreen canvas { width: auto; height: auto; max-width: 100vw; max-height: 100vh; aspect-ratio: inherit; }
+@media (max-width: 640px) {
+  nav { display: none; }
+  .brand h1 { font-size: 24px; }
+  .stage.portrait { height: 70vh; }
+  .time { font-size: 12px; }
+  .icon { width: 38px; height: 38px; }
+}

shouhouzi/index.html

@@ -1 +1,127 @@
-<!doctype html><meta charset=utf-8><title>收猴子的故事</title><p>制作中……</p>
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+<title>收猴子的故事 · 经济学寓言动画</title>
+<meta name="description" content="用手绘动画讲解经济学寓言“收猴子的故事”，支持网页播放、浏览器本地导出 MP4（横屏B站 / 竖屏抖音，24/30/60fps）。">
+<meta property="og:image" content="covers/cover-landscape.png">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐒</text></svg>">
+<link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+<header class="top">
+  <div class="brand"><span class="logo">🐒</span><div><h1>收猴子的故事</h1><p>一个寓言，看懂所有泡沫 · 手绘动画 · 网页即播 · 本地导出 MP4</p></div></div>
+  <nav><a href="#player">播放</a><a href="#export">导出视频</a><a href="#covers">封面</a><a href="#publish">发布文案</a><a href="#script">完整文案</a></nav>
+</header>
+
+<main>
+  <!-- 播放器 -->
+  <section id="player" class="card">
+    <div class="stage-wrap" id="stageWrap">
+      <div class="stage" id="stage">
+        <canvas id="view"></canvas>
+        <div class="overlay" id="loading"><div class="spinner"></div><div id="loadingText">正在加载字体与配音……</div><div class="bar"><i id="loadingBar"></i></div></div>
+        <button class="bigplay hidden" id="bigPlay" aria-label="播放">▶</button>
+      </div>
+    </div>
+    <div class="controls">
+      <button id="btnPlay" class="icon" title="播放/暂停（空格）">▶</button>
+      <span class="time"><b id="tCur">00:00</b> / <span id="tTot">00:00</span></span>
+      <div class="seek" id="seek"><div class="seek-fill" id="seekFill"></div><div class="marks" id="marks"></div><div class="knob" id="knob"></div></div>
+      <button id="btnMute" class="icon" title="静音">🔊</button>
+      <button id="btnFull" class="icon" title="全屏">⛶</button>
+    </div>
+    <div class="row opts">
+      <div class="seg" id="modeSeg">
+        <button data-mode="landscape" class="on">横屏 16:9 · B站</button>
+        <button data-mode="portrait">竖屏 9:16 · 抖音</button>
+      </div>
+      <label class="chk"><input type="checkbox" id="chkGuides"> 显示手机安全区（刘海 / 底部文案 / 右侧按钮）</label>
+    </div>
+    <div class="chapters" id="chapters"></div>
+  </section>
+
+  <!-- 导出 -->
+  <section id="export" class="card">
+    <h2>🎬 导出 MP4（浏览器本地渲染）</h2>
+    <p class="muted">逐帧离线渲染 + 硬件编码，画面与音轨和网页预览完全一致；文件不会上传到任何服务器。推荐使用 <b>桌面版 Chrome / Edge 最新版</b>。</p>
+    <div class="grid2">
+      <div>
+        <div class="lbl">画幅</div>
+        <div class="seg" id="expMode">
+          <button data-v="landscape" class="on">横屏 1920×1080（哔哩哔哩）</button>
+          <button data-v="portrait">竖屏 1080×1920（抖音）</button>
+        </div>
+      </div>
+      <div>
+        <div class="lbl">帧率</div>
+        <div class="seg" id="expFps">
+          <button data-v="24">24 fps</button>
+          <button data-v="30" class="on">30 fps</button>
+          <button data-v="60">60 fps</button>
+        </div>
+      </div>
+      <div>
+        <div class="lbl">画质</div>
+        <div class="seg" id="expQ">
+          <button data-v="std" class="on">标准</button>
+          <button data-v="high">高码率</button>
+        </div>
+      </div>
+      <div>
+        <div class="lbl">范围</div>
+        <div class="seg" id="expRange">
+          <button data-v="full" class="on">完整视频</button>
+          <button data-v="test">前 15 秒（快速测试）</button>
+        </div>
+      </div>
+    </div>
+    <label class="chk" id="diskRow"><input type="checkbox" id="chkDisk"> 边渲染边写入磁盘（省内存，适合 60fps / 低内存设备）</label>
+    <div class="row">
+      <button class="primary" id="btnExport">开始导出 MP4</button>
+      <button class="ghost hidden" id="btnCancel">取消</button>
+      <span class="muted" id="expInfo"></span>
+    </div>
+    <div class="progress hidden" id="expProg"><i id="expBar"></i><span id="expTxt"></span></div>
+    <div id="expResult"></div>
+    <div class="note" id="supportNote"></div>
+  </section>
+
+  <!-- 封面 -->
+  <section id="covers" class="card">
+    <h2>🖼️ 封面图</h2>
+    <p class="muted">已生成静态 PNG，也可以在浏览器里用动画引擎实时重绘后下载（与视频画风一致）。</p>
+    <div class="covers">
+      <figure><img src="covers/cover-landscape.png" alt="横屏封面" loading="lazy"><figcaption>横屏 1920×1080 · 哔哩哔哩<br><a class="btn" href="covers/cover-landscape.png" download="收猴子的故事-横屏封面.png">下载 PNG</a> <button class="btn" data-cover="landscape">重新绘制并下载</button></figcaption></figure>
+      <figure class="tall"><img src="covers/cover-portrait.png" alt="竖屏封面" loading="lazy"><figcaption>竖屏 1080×1920 · 抖音<br><a class="btn" href="covers/cover-portrait.png" download="收猴子的故事-竖屏封面.png">下载 PNG</a> <button class="btn" data-cover="portrait">重新绘制并下载</button></figcaption></figure>
+    </div>
+  </section>
+
+  <!-- 发布文案 -->
+  <section id="publish" class="card">
+    <h2>📣 发布文案（点击即可复制）</h2>
+    <div class="seg" id="pubTabs"><button data-v="douyin" class="on">抖音</button><button data-v="bilibili">哔哩哔哩</button></div>
+    <div id="pubBody"></div>
+  </section>
+
+  <!-- 完整文案 -->
+  <section id="script" class="card">
+    <h2>📝 完整旁白文案 <button class="btn small" id="copyScript">复制全文</button></h2>
+    <div id="scriptBody" class="script"></div>
+  </section>
+</main>
+<footer>旁白：微软 Edge 神经网络语音合成 · 字体：站酷快乐体（SIL OFL）· 画面、音乐与音效均由代码实时生成</footer>
+<div class="toast" id="toast"></div>
+
+<script src="vendor/mp4-muxer.js"></script>
+<script src="js/script-data.js"></script>
+<script src="js/draw.js"></script>
+<script src="js/scenes.js"></script>
+<script src="js/engine.js"></script>
+<script src="js/audio.js"></script>
+<script src="js/exporter.js"></script>
+<script src="js/publish.js"></script>
+<script src="js/app.js"></script>
+</body>
+</html>

shouhouzi/js/app.js

@@ -0,0 +1,228 @@
+/* =========================================================
+ * app.js —— 播放器 / 导出 / 封面 / 发布文案 UI
+ * ========================================================= */
+(function () {
+  const $ = (s) => document.querySelector(s);
+  const $$ = (s) => [...document.querySelectorAll(s)];
+  const view = $('#view'), stage = $('#stage');
+  const vctx = view.getContext('2d', { alpha: false });
+  const mmss = PUBLISH.mmss;
+  const state = { mode: 'landscape', t: 0, playing: false, guides: false, soundtrack: null, actx: null, src: null, gain: null, startAt: 0, clock0: 0, muted: false, ready: false, dirty: true, poster: true };
+
+  function toast(msg) { const el = $('#toast'); el.textContent = msg; el.classList.add('show'); clearTimeout(toast.h); toast.h = setTimeout(() => el.classList.remove('show'), 1800); }
+  function segment(sel, cb) {
+    $$(sel + ' button').forEach((b) => b.addEventListener('click', () => { $$(sel + ' button').forEach((x) => x.classList.remove('on')); b.classList.add('on'); cb(b.dataset.v || b.dataset.mode); }));
+  }
+  const segVal = (sel) => { const b = $(sel + ' button.on'); return b && (b.dataset.v || b.dataset.mode); };
+
+  /* ---------- 画布尺寸（预览自适应分辨率） ---------- */
+  function resize() {
+    const L = LAYOUTS[state.mode];
+    stage.classList.toggle('portrait', state.mode === 'portrait');
+    const cssW = stage.clientWidth || 800;
+    const dpr = Math.min(2, window.devicePixelRatio || 1);
+    const scale = Math.min(1, (cssW * dpr) / L.W);
+    state.scale = Math.max(0.3, scale);
+    view.width = Math.round(L.W * state.scale); view.height = Math.round(L.H * state.scale);
+    state.dirty = true;
+  }
+
+  /* ---------- 时钟 ---------- */
+  function now() {
+    if (!state.playing) return state.t;
+    if (state.actx && state.src) return state.startAt + (state.actx.currentTime - state.clock0);
+    return state.startAt + (performance.now() - state.clock0) / 1000;
+  }
+  function ensureCtx() {
+    if (!state.actx) { const AC = window.AudioContext || window.webkitAudioContext; try { state.actx = new AC({ sampleRate: 48000 }); } catch (e) { state.actx = new AC(); } state.gain = state.actx.createGain(); state.gain.connect(state.actx.destination); state.gain.gain.value = state.muted ? 0 : 1; }
+    if (state.actx.state === 'suspended') state.actx.resume();
+  }
+  function play() {
+    if (state.t >= TL.total - 0.05) state.t = 0;
+    ensureCtx();
+    state.playing = true; state.startAt = state.t;
+    if (state.soundtrack) {
+      state.src = state.actx.createBufferSource(); state.src.buffer = state.soundtrack; state.src.connect(state.gain);
+      state.clock0 = state.actx.currentTime + 0.03; state.src.start(state.clock0, state.t);
+    } else { state.src = null; state.clock0 = performance.now(); }
+    $('#btnPlay').textContent = '❚❚'; $('#bigPlay').classList.add('hidden');
+  }
+  function pause() {
+    state.t = Math.min(TL.total, now()); state.playing = false;
+    if (state.src) { try { state.src.stop(); } catch (e) { /* */ } state.src = null; }
+    $('#btnPlay').textContent = '▶'; state.dirty = true;
+  }
+  function seek(t) { const was = state.playing; if (was) pause(); state.t = Math.max(0, Math.min(TL.total - 0.01, t)); state.dirty = true; if (was) play(); }
+  function toggle() { state.playing ? pause() : play(); }
+
+  /* ---------- 主循环 ---------- */
+  let lastScene = -1;
+  function loop() {
+    if (state.playing) { state.t = now(); if (state.t >= TL.total) { state.t = TL.total - 0.001; pause(); } state.dirty = true; }
+    if (state.dirty && state.ready) {
+      if (state.poster && !state.playing && state.t === 0) ENGINE.renderCover(vctx, LAYOUTS[state.mode], state.scale);
+      else { state.poster = false; ENGINE.render(vctx, state.t, LAYOUTS[state.mode], { guides: state.guides, scale: state.scale }); }
+      state.dirty = false;
+      const p = state.t / TL.total;
+      $('#seekFill').style.width = (p * 100) + '%'; $('#knob').style.left = (p * 100) + '%';
+      $('#tCur').textContent = mmss(state.t);
+      const si = TL.at(state.t).sc.index;
+      if (si !== lastScene) { lastScene = si; $$('#chapters button').forEach((b, i) => b.classList.toggle('on', i === si)); }
+    }
+    requestAnimationFrame(loop);
+  }
+
+  /* ---------- 进度条拖动 ---------- */
+  function initSeek() {
+    const el = $('#seek');
+    const at = (e) => { const r = el.getBoundingClientRect(); return (Math.max(0, Math.min(1, (e.clientX - r.left) / r.width))) * TL.total; };
+    let drag = false, wasPlaying = false;
+    el.addEventListener('pointerdown', (e) => { drag = true; wasPlaying = state.playing; if (wasPlaying) pause(); el.setPointerCapture(e.pointerId); state.t = at(e); state.dirty = true; });
+    el.addEventListener('pointermove', (e) => { if (drag) { state.t = at(e); state.dirty = true; } });
+    el.addEventListener('pointerup', () => { drag = false; if (wasPlaying) play(); });
+    $('#marks').innerHTML = TL.scenes.map((s) => `<i style="left:${s.start / TL.total * 100}%"></i>`).join('');
+    $('#tTot').textContent = mmss(TL.total);
+    $('#chapters').innerHTML = TL.scenes.map((s, i) => `<button data-i="${i}"><small>${mmss(s.start)}</small>${i === 0 ? '开场' : s.title}</button>`).join('');
+    $$('#chapters button').forEach((b) => b.addEventListener('click', () => seek(TL.scenes[+b.dataset.i].start + 0.01)));
+  }
+
+  /* ---------- 控件 ---------- */
+  function initControls() {
+    $('#btnPlay').addEventListener('click', toggle);
+    $('#bigPlay').addEventListener('click', toggle);
+    view.addEventListener('click', toggle);
+    $('#btnMute').addEventListener('click', () => { state.muted = !state.muted; if (state.gain) state.gain.gain.value = state.muted ? 0 : 1; $('#btnMute').textContent = state.muted ? '🔇' : '🔊'; });
+    $('#btnFull').addEventListener('click', () => { if (document.fullscreenElement) document.exitFullscreen(); else (stage.requestFullscreen || stage.webkitRequestFullscreen || (() => {})).call(stage); });
+    document.addEventListener('keydown', (e) => {
+      if (/INPUT|TEXTAREA/.test(e.target.tagName)) return;
+      if (e.code === 'Space') { e.preventDefault(); toggle(); }
+      if (e.code === 'ArrowRight') seek(state.t + 5);
+      if (e.code === 'ArrowLeft') seek(state.t - 5);
+    });
+    segment('#modeSeg', (m) => { state.mode = m; resize(); });
+    $('#chkGuides').addEventListener('change', (e) => { state.guides = e.target.checked; state.dirty = true; });
+    window.addEventListener('resize', resize);
+    document.addEventListener('fullscreenchange', resize);
+  }
+
+  /* ---------- 导出 ---------- */
+  let abortFlag = null;
+  function initExport() {
+    segment('#expMode', () => {}); segment('#expFps', () => {}); segment('#expQ', () => {}); segment('#expRange', () => {});
+    const sup = EXPORTER.supportInfo();
+    if (!sup.fsapi) $('#diskRow').classList.add('hidden');
+    $('#supportNote').innerHTML = sup.webcodecs
+      ? '✅ 当前浏览器支持 WebCodecs 本地编码。导出时间约为视频时长的 0.5~2 倍（取决于电脑性能与帧率），导出期间请保持此标签页在前台。<br>📌 抖音竖屏：画面重要信息已避开顶部刘海/状态栏、底部文案与右侧按钮区；B站横屏：1920×1080，可直接投稿。'
+      : '⚠️ 当前浏览器不支持 WebCodecs（VideoEncoder），无法本地导出 MP4。请使用桌面版 Chrome 94+ / Edge 94+（Safari 16.4+ 部分支持）。网页播放不受影响。';
+    if (!sup.webcodecs) { $('#supportNote').classList.add('warn'); $('#btnExport').disabled = true; }
+    $('#btnExport').addEventListener('click', async () => {
+      const mode = segVal('#expMode'), fps = +segVal('#expFps'), q = segVal('#expQ'), range = segVal('#expRange');
+      const L = LAYOUTS[mode];
+      const base = { 24: 7, 30: 8, 60: 12 }[fps] * 1e6;
+      const bitrate = q === 'high' ? base * 1.8 : base;
+      if (!state.soundtrack) { toast('音轨还在生成，请稍候……'); return; }
+      if (state.playing) pause();
+      abortFlag = { aborted: false };
+      $('#btnExport').disabled = true; $('#btnCancel').classList.remove('hidden'); $('#expProg').classList.remove('hidden'); $('#expResult').innerHTML = '';
+      const filename = `收猴子的故事-${mode === 'landscape' ? 'B站横屏1920x1080' : '抖音竖屏1080x1920'}-${fps}fps${range === 'test' ? '-测试片段' : ''}.mp4`;
+      const t0 = performance.now();
+      try {
+        const res = await EXPORTER.exportMP4({
+          mode, fps, bitrate, audio: state.soundtrack, signal: abortFlag, filename,
+          range: range === 'test' ? [0, 15] : [0, TL.total],
+          saveToDisk: $('#chkDisk').checked,
+          onProgress: (p, info) => {
+            $('#expBar').style.width = (p * 100).toFixed(1) + '%';
+            $('#expTxt').textContent = `${(p * 100).toFixed(1)}%　第 ${info.frame}/${info.total} 帧　已用 ${mmss(info.elapsed)}　剩余约 ${mmss(info.eta)}`;
+            $('#expInfo').textContent = `${L.W}×${L.H} · ${fps}fps · 视频 ${info.codec} · 音频 ${info.audio}`;
+          },
+        });
+        const secs = ((performance.now() - t0) / 1000).toFixed(0);
+        if (res.savedToDisk) { $('#expResult').innerHTML = `<p>✅ 已直接保存到磁盘：<b>${filename}</b>（用时 ${secs}s）</p>`; }
+        else {
+          const url = URL.createObjectURL(res.blob);
+          const mb = (res.blob.size / 1048576).toFixed(1);
+          const warn = /^vp09/.test(res.codec) ? '<p class="note warn">⚠️ 当前浏览器没有 H.264 编码器，已改用 VP9 编码的 MP4。B站可正常投稿；抖音建议改用桌面版 Chrome / Edge 重新导出 H.264 版本。</p>' : '';
+          $('#expResult').innerHTML = `<p>✅ 导出完成：<b>${filename}</b>（${mb} MB，用时 ${secs}s，视频 ${res.codec}，音频 ${res.audio || '无'}）　<a class="btn" href="${url}" download="${filename}">⬇ 下载 MP4</a></p>${warn}<video src="${url}" controls playsinline></video>`;
+          const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); a.remove();
+        }
+        toast('导出完成！');
+      } catch (e) {
+        console.error(e);
+        $('#expResult').innerHTML = `<p class="note warn">❌ ${e.message || e}</p>`;
+      } finally {
+        $('#btnExport').disabled = false; $('#btnCancel').classList.add('hidden');
+      }
+    });
+    $('#btnCancel').addEventListener('click', () => { if (abortFlag) abortFlag.aborted = true; });
+  }
+
+  /* ---------- 封面 ---------- */
+  function initCovers() {
+    $$('[data-cover]').forEach((b) => b.addEventListener('click', () => {
+      const L = LAYOUTS[b.dataset.cover];
+      const c = document.createElement('canvas'); c.width = L.W; c.height = L.H;
+      ENGINE.renderCover(c.getContext('2d'), L);
+      c.toBlob((blob) => { const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `收猴子的故事-${b.dataset.cover === 'landscape' ? '横屏' : '竖屏'}封面.png`; a.click(); }, 'image/png');
+    }));
+  }
+
+  /* ---------- 发布文案 ---------- */
+  async function copy(text) {
+    try { await navigator.clipboard.writeText(text); }
+    catch (e) { const ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove(); }
+    toast('已复制到剪贴板 ✓');
+  }
+  function initPublish() {
+    const P = PUBLISH.build();
+    const show = (k) => {
+      const d = P[k];
+      $('#pubBody').innerHTML = `<p class="muted">${d.name}</p>` + d.fields.map((f, i) => `<div class="pub-field"><header><span>${f.k}<span class="cnt">${[...f.v].length} 字</span></span><button class="btn small" data-i="${i}">复制</button></header><pre data-i="${i}"></pre></div>`).join('') + `<div class="row"><button class="primary" id="copyAll">复制全部</button></div>`;
+      $$('#pubBody pre').forEach((p) => { p.textContent = d.fields[+p.dataset.i].v; p.addEventListener('click', () => copy(p.textContent)); });
+      $$('#pubBody header button').forEach((b) => b.addEventListener('click', () => copy(d.fields[+b.dataset.i].v)));
+      $('#copyAll').addEventListener('click', () => copy(d.fields.map((f) => `【${f.k}】\n${f.v}`).join('\n\n')));
+    };
+    segment('#pubTabs', show); show('douyin');
+  }
+
+  /* ---------- 完整文案 ---------- */
+  function initScript() {
+    let html = '', plain = '';
+    TL.scenes.forEach((s, i) => {
+      html += `<h3>${i === 0 ? '开场' : '第' + i + '幕'}｜${s.title}</h3>`;
+      plain += `\n【${i === 0 ? '开场' : '第' + i + '幕'}｜${s.title}】\n`;
+      s.lines.forEach((l, j) => {
+        const who = l.v === 'm' ? '<span class="who m">商人</span>' : l.v === 'a' ? '<span class="who a">助手</span>' : '';
+        html += `<p><span class="ts" data-t="${s.start + s.L[j]}">${mmss(s.start + s.L[j])}</span>${who}${l.s.replace(/</g, '&lt;')}</p>`;
+        plain += (l.v === 'm' ? '商人：' : l.v === 'a' ? '助手：' : '') + l.s + '\n';
+      });
+    });
+    $('#scriptBody').innerHTML = html;
+    $$('#scriptBody .ts').forEach((el) => el.addEventListener('click', () => { seek(+el.dataset.t); $('#player').scrollIntoView(); }));
+    $('#copyScript').addEventListener('click', () => copy(plain.trim()));
+  }
+
+  /* ---------- 启动 ---------- */
+  async function boot() {
+    resize(); initSeek(); initControls(); initExport(); initCovers(); initPublish(); initScript();
+    requestAnimationFrame(loop);
+    const setL = (p, txt) => { $('#loadingBar').style.width = (p * 100).toFixed(0) + '%'; $('#loadingText').textContent = txt; };
+    setL(0.02, '正在加载字体……');
+    try { await Promise.race([document.fonts.load('40px KuaiLe'), new Promise((r) => setTimeout(r, 6000))]); } catch (e) { /* */ }
+    state.ready = true; state.dirty = true;
+    $('#loading').classList.add('hidden'); $('#bigPlay').classList.remove('hidden');
+    // 后台生成音轨（期间可静音预览）
+    const tag = $('#expInfo');
+    try {
+      tag.textContent = '音轨生成中……';
+      const buf = await AUDIO.renderSoundtrack((p, s) => { tag.textContent = `音轨生成中：${s} ${(p * 100).toFixed(0)}%`; });
+      state.soundtrack = buf;
+      tag.textContent = '音轨已就绪 ✓';
+      if (state.playing) { pause(); play(); }
+    } catch (e) {
+      console.error(e); tag.textContent = '音轨生成失败：' + e.message;
+    }
+  }
+  boot();
+  window.APP = state;
+})();

shouhouzi/js/audio.js

@@ -0,0 +1,352 @@
+/* =========================================================
+ * audio.js —— 程序化配乐 + 合成音效 + 旁白混音
+ * 用 OfflineAudioContext 一次性渲染整条音轨（48kHz 立体声），
+ * 预览播放与 MP4 导出共用同一个 AudioBuffer，保证音画同步。
+ * ========================================================= */
+(function () {
+  const SR = 48000;
+  const midi = (m) => 440 * Math.pow(2, (m - 69) / 12);
+  const H = (n) => D.hash(n);
+
+  /* ---------- 乐器 ---------- */
+  function makeKit(ctx, dest) {
+    const noiseBuf = ctx.createBuffer(1, SR * 2, SR);
+    const nd = noiseBuf.getChannelData(0);
+    for (let i = 0; i < nd.length; i++) nd[i] = H(i * 0.123) * 2 - 1;
+    const K = { ctx, dest };
+    function env(g, t, a, peak, d, sustain = 0.0001) {
+      g.gain.setValueAtTime(0.0001, t);
+      g.gain.exponentialRampToValueAtTime(Math.max(0.0002, peak), t + a);
+      g.gain.exponentialRampToValueAtTime(Math.max(0.0001, sustain), t + a + d);
+    }
+    function out(node, pan = 0, bus = dest) {
+      if (pan && ctx.createStereoPanner) { const p = ctx.createStereoPanner(); p.pan.value = pan; node.connect(p); p.connect(bus); }
+      else node.connect(bus);
+    }
+    function noise(t, dur, type, freq, q, peak, a = 0.003, pan = 0, bus = dest, freqEnd = null) {
+      const s = ctx.createBufferSource(); s.buffer = noiseBuf; s.loop = true;
+      const f = ctx.createBiquadFilter(); f.type = type; f.frequency.setValueAtTime(freq, t); f.Q.value = q;
+      if (freqEnd) f.frequency.exponentialRampToValueAtTime(freqEnd, t + dur);
+      const g = ctx.createGain(); env(g, t, a, peak, dur);
+      s.connect(f); f.connect(g); out(g, pan, bus);
+      s.start(t, H(t) * 1.5); s.stop(t + a + dur + 0.05);
+    }
+    function tone(t, freq, dur, peak, type = 'sine', a = 0.004, pan = 0, bus = dest, freqEnd = null, lp = null) {
+      const o = ctx.createOscillator(); o.type = type; o.frequency.setValueAtTime(freq, t);
+      if (freqEnd) o.frequency.exponentialRampToValueAtTime(freqEnd, t + dur);
+      const g = ctx.createGain(); env(g, t, a, peak, dur);
+      let n = o;
+      if (lp) { const f = ctx.createBiquadFilter(); f.type = 'lowpass'; f.frequency.value = lp; o.connect(f); n = f; }
+      n.connect(g); out(g, pan, bus);
+      o.start(t); o.stop(t + a + dur + 0.05);
+      return o;
+    }
+    K.noise = noise; K.tone = tone;
+    // —— 音乐乐器 ——
+    K.kick = (t, v = 0.9, bus) => { tone(t, 150, 0.16, v, 'sine', 0.002, 0, bus, 42); };
+    K.snare = (t, v = 0.4, bus) => { noise(t, 0.16, 'bandpass', 1900, 0.8, v, 0.002, 0, bus); tone(t, 210, 0.07, v * 0.5, 'triangle', 0.002, 0, bus); };
+    K.hat = (t, v = 0.12, bus, pan = 0.2) => noise(t, 0.04, 'highpass', 7500, 0.7, v, 0.001, pan, bus);
+    K.shaker = (t, v = 0.07, bus) => noise(t, 0.06, 'bandpass', 5200, 1.2, v, 0.012, -0.25, bus);
+    K.bass = (t, m, dur, v = 0.35, bus) => { tone(t, midi(m), dur, v, 'triangle', 0.01, 0, bus, null, 900); tone(t, midi(m - 12), dur, v * 0.6, 'sine', 0.01, 0, bus); };
+    K.pluck = (t, m, dur, v = 0.12, bus, pan = 0) => { tone(t, midi(m), dur, v, 'triangle', 0.003, pan, bus, null, 3200); tone(t, midi(m) * 2.005, dur * 0.4, v * 0.25, 'sine', 0.003, pan, bus); };
+    K.marimba = (t, m, v = 0.16, bus, pan = 0) => { tone(t, midi(m), 0.45, v, 'sine', 0.002, pan, bus); tone(t, midi(m) * 4, 0.08, v * 0.35, 'sine', 0.001, pan, bus); };
+    K.pizz = (t, m, v = 0.16, bus, pan = 0) => { tone(t, midi(m), 0.22, v, 'sawtooth', 0.002, pan, bus, null, 1400); };
+    K.epiano = (t, m, dur, v = 0.07, bus, pan = 0) => { tone(t, midi(m), dur, v, 'sine', 0.008, pan, bus); tone(t, midi(m) * 2, dur * 0.3, v * 0.3, 'sine', 0.004, pan, bus); tone(t, midi(m) * 1.003, dur, v * 0.5, 'triangle', 0.01, -pan, bus, null, 1600); };
+    K.pad = (t, ms, dur, v = 0.035, bus) => ms.forEach((m, i) => { [-6, 6].forEach((dt) => { const o = ctx.createOscillator(); o.type = 'sawtooth'; o.frequency.value = midi(m); o.detune.value = dt; const f = ctx.createBiquadFilter(); f.type = 'lowpass'; f.frequency.value = 900; const g = ctx.createGain(); g.gain.setValueAtTime(0.0001, t); g.gain.linearRampToValueAtTime(v, t + Math.min(0.8, dur * .3)); g.gain.setValueAtTime(v, t + dur * 0.75); g.gain.linearRampToValueAtTime(0.0001, t + dur); o.connect(f); f.connect(g); out(g, (i - 1) * 0.3, bus); o.start(t); o.stop(t + dur + 0.05); }); });
+    K.bell = (t, m, v = 0.12, bus, dur = 1.2) => { tone(t, midi(m), dur, v, 'sine', 0.002, 0, bus); tone(t, midi(m) * 2.76, dur * 0.4, v * 0.3, 'sine', 0.002, 0, bus); tone(t, midi(m) * 5.4, dur * 0.2, v * 0.15, 'sine', 0.002, 0, bus); };
+    return K;
+  }
+
+  /* ---------- 配乐 ---------- */
+  const MOODS = {
+    // root: 主音 MIDI；prog: 每小节和弦（相对主音的三和弦根音 + 类型）
+    bright: { bpm: 112, root: 60, prog: [[0, 'M'], [7, 'M'], [9, 'm'], [5, 'M']], drums: 'pop', lead: 'marimba', scale: [0, 2, 4, 7, 9], density: 0.55 },
+    tense: { bpm: 118, root: 57, prog: [[0, 'm'], [8, 'M'], [3, 'M'], [10, 'M']], drums: 'pop', lead: 'pluck', scale: [0, 3, 5, 7, 10], density: 0.5 },
+    drum: { bpm: 120, root: 57, prog: [[0, 'm'], [0, 'm'], [0, 'm'], [0, 'm']], drums: 'none', lead: 'none', scale: [0], density: 0 },
+    hype: { bpm: 128, root: 60, prog: [[0, 'M'], [7, 'M'], [9, 'm'], [5, 'M']], drums: 'four', lead: 'pluck', scale: [0, 2, 4, 7, 9], density: 0.7 },
+    sneaky: { bpm: 96, root: 62, prog: [[0, 'm'], [5, 'm'], [0, 'm'], [7, 'M']], drums: 'sneak', lead: 'pizz', scale: [0, 3, 5, 6, 7, 10], density: 0.45 },
+    frenzy: { bpm: 136, root: 62, prog: [[0, 'M'], [5, 'M'], [7, 'M'], [5, 'M']], drums: 'four', lead: 'marimba', scale: [0, 2, 4, 7, 9], density: 0.8 },
+    sad: { bpm: 68, root: 57, prog: [[0, 'm'], [8, 'M'], [3, 'M'], [7, 'M']], drums: 'none', lead: 'epiano', scale: [0, 3, 5, 7, 10], density: 0.3 },
+    think: { bpm: 84, root: 65, prog: [[0, 'M7'], [-1, 'm7'], [-3, 'm7'], [-5, 'M7']], drums: 'lofi', lead: 'epiano', scale: [0, 2, 4, 7, 9], density: 0.35 },
+    warm: { bpm: 104, root: 65, prog: [[0, 'M'], [2, 'm'], [5, 'M'], [7, 'M']], drums: 'pop', lead: 'marimba', scale: [0, 2, 4, 7, 9], density: 0.5 },
+  };
+  const CHORD = { M: [0, 4, 7], m: [0, 3, 7], M7: [0, 4, 7, 11], m7: [0, 3, 7, 10] };
+
+  function musicPlan() {
+    const c = TL.cue;
+    return [
+      [0, c('hook', 6, -0.2), 'bright'],
+      [c('hook', 6, -0.2), c('village', -1, 0), 'warm'],
+      [c('village', -1, 0), c('twenty', 0, 0), 'bright'],
+      [c('twenty', 0, 0), c('fifty', -1, 0), 'tense'],
+      [c('fifty', -1, 0), c('fifty', 2, 0), 'drum'],
+      [c('fifty', 2, 0), c('deal', -1, 0), 'hype'],
+      [c('deal', -1, 0), c('frenzy', -1, 0), 'sneaky'],
+      [c('frenzy', -1, 0), c('gone', -1, 0), 'frenzy'],
+      [c('gone', -1, 0), c('ledger', -1, 0), 'sad'],
+      [c('ledger', -1, 0), c('check', -1, 0), 'think'],
+      [c('check', -1, 0), TL.total, 'warm'],
+    ];
+  }
+
+  function scheduleMusic(K, bus) {
+    musicPlan().forEach(([t0, t1, name], si) => {
+      const M = MOODS[name];
+      const beat = 60 / M.bpm, bar = beat * 4;
+      const nBars = Math.ceil((t1 - t0) / bar);
+      for (let b = 0; b < nBars; b++) {
+        const tb = t0 + b * bar;
+        if (tb >= t1) break;
+        const [deg, q] = M.prog[b % M.prog.length];
+        const root = M.root + deg;
+        const chord = CHORD[q].map((x) => root + x);
+        const barEnd = Math.min(t1, tb + bar);
+        const fadeOut = (t) => t < t1 - 0.05;
+        // 低音
+        if (name !== 'drum') {
+          if (name === 'sneaky') [0, 1, 2, 3].forEach((i) => { const t = tb + i * beat; if (fadeOut(t)) K.pizz(t, root - 12 + [0, 3, 7, 6][i], 0.2, bus); });
+          else if (name === 'sad') K.bass(tb, root - 12, bar * 0.95, 0.16, bus);
+          else [0, 2].forEach((i) => { const t = tb + i * beat * 2; if (fadeOut(t)) K.bass(t, root - 12 + (i === 1 && name !== 'think' ? 7 : 0), beat * 1.8, name === 'think' ? 0.2 : 0.24, bus); });
+        }
+        // 和声
+        if (name === 'sad' || name === 'think') K.pad(tb, chord.map((m) => m - (name === 'think' ? 12 : 0)), barEnd - tb, name === 'sad' ? 0.03 : 0.022, bus);
+        if (name === 'think') [0, 1.5, 2.5].forEach((x) => { const t = tb + x * beat; if (fadeOut(t)) chord.forEach((m, i) => K.epiano(t + i * 0.012, m, beat * 1.2, 0.035, bus, (i - 1.5) * 0.2)); });
+        if (['bright', 'warm', 'hype', 'frenzy', 'tense'].includes(name)) {
+          for (let i = 0; i < 8; i++) { if (i % 2 === 0 || name === 'frenzy' || name === 'hype') { const t = tb + i * beat / 2; if (!fadeOut(t)) continue; const m = chord[(i >> 1) % chord.length]; K.pluck(t, m, beat * 0.5, 0.045, bus, i % 2 ? 0.3 : -0.3); } }
+        }
+        // 鼓
+        const dr = M.drums;
+        for (let i = 0; i < 4; i++) {
+          const t = tb + i * beat; if (!fadeOut(t)) continue;
+          if (dr === 'pop') { if (i === 0 || i === 2) K.kick(t, 0.5, bus); if (i === 1 || i === 3) K.snare(t, 0.16, bus); K.hat(t + beat / 2, 0.06, bus); K.shaker(t, 0.04, bus); }
+          if (dr === 'four') { K.kick(t, 0.6, bus); if (i % 2) K.snare(t, 0.18, bus); K.hat(t + beat / 2, 0.09, bus); K.hat(t + beat / 4 * 3, 0.04, bus, -0.2); }
+          if (dr === 'lofi') { if (i === 0 || (i === 2 && b % 2)) K.kick(t, 0.38, bus); if (i === 1 || i === 3) K.snare(t, 0.08, bus); K.hat(t + beat * 0.58, 0.04, bus); K.hat(t, 0.03, bus, -0.2); }
+          if (dr === 'sneak') { if (i === 0) K.kick(t, 0.3, bus); K.hat(t + beat * 0.5, 0.05, bus); if (i === 3) K.noise(t, 0.05, 'bandpass', 3000, 2, 0.06, 0.002, 0.3, bus); }
+        }
+        // 旋律（确定性"随机"）
+        if (M.lead !== 'none') {
+          const steps = name === 'sad' ? 4 : 8;
+          for (let i = 0; i < steps; i++) {
+            const seed = si * 1000 + b * 16 + i;
+            if (H(seed) > M.density) continue;
+            const t = tb + i * bar / steps; if (!fadeOut(t)) continue;
+            const deg2 = M.scale[Math.floor(H(seed * 3.1) * M.scale.length)];
+            const oct = H(seed * 7.7) > 0.7 ? 24 : 12;
+            const m = M.root + deg2 + oct;
+            const pan = (H(seed * 5.5) - 0.5) * 0.6;
+            if (M.lead === 'marimba') K.marimba(t, m, 0.07, bus, pan);
+            else if (M.lead === 'pluck') K.pluck(t, m, 0.25, 0.05, bus, pan);
+            else if (M.lead === 'pizz') K.pizz(t, m, 0.07, bus, pan);
+            else if (M.lead === 'epiano') K.epiano(t, m, 0.9, 0.04, bus, pan);
+          }
+        }
+      }
+    });
+  }
+
+  /* ---------- 音效 ---------- */
+  function makeSfx(K, bus) {
+    const { tone, noise } = K;
+    const S = {
+      pop: (t, v = 0.35) => tone(t, 380, 0.09, v, 'sine', 0.002, 0, bus, 980),
+      click: (t) => { noise(t, 0.02, 'highpass', 3000, 1, 0.4, 0.001, 0, bus); tone(t, 1800, 0.03, 0.15, 'square', 0.001, 0, bus, null, 4000); },
+      coin: (t, v = 0.22) => { tone(t, 1975, 0.07, v, 'square', 0.001, 0.1, bus, null, 5000); tone(t + 0.07, 2637, 0.32, v, 'square', 0.001, 0.1, bus, null, 5000); },
+      coins: (t, n = 6) => { for (let i = 0; i < n; i++) S.coin(t + i * 0.09 + H(t + i) * 0.04, 0.12); },
+      cash: (t) => { noise(t, 0.12, 'bandpass', 2500, 1, 0.3, 0.002, 0, bus); [88, 92, 95].forEach((m, i) => K.bell(t + 0.08 + i * 0.03, m, 0.1, bus, 0.8)); S.coins(t + 0.15, 4); },
+      whoosh: (t, d = 0.45, v = 0.28) => noise(t, d, 'bandpass', 300, 1.2, v, d * 0.5, 0, bus, 3200),
+      swish: (t) => noise(t, 0.25, 'bandpass', 2400, 2, 0.18, 0.08, 0, bus, 600),
+      boing: (t) => { const o = tone(t, 220, 0.5, 0.3, 'sine', 0.004, 0, bus, 520); const l = K.ctx.createOscillator(); l.frequency.value = 18; const g = K.ctx.createGain(); g.gain.value = 40; l.connect(g); g.connect(o.frequency); l.start(t); l.stop(t + 0.6); },
+      monkey: (t, n = 3) => {
+        for (let i = 0; i < n; i++) {
+          const tt = t + i * 0.16;
+          const o = K.ctx.createOscillator(); o.type = 'sawtooth';
+          o.frequency.setValueAtTime(520, tt); o.frequency.linearRampToValueAtTime(900, tt + 0.05); o.frequency.linearRampToValueAtTime(600, tt + 0.12);
+          const f = K.ctx.createBiquadFilter(); f.type = 'bandpass'; f.frequency.value = 1300; f.Q.value = 3;
+          const g = K.ctx.createGain(); g.gain.setValueAtTime(0.0001, tt); g.gain.exponentialRampToValueAtTime(0.25, tt + 0.02); g.gain.exponentialRampToValueAtTime(0.0001, tt + 0.13);
+          o.connect(f); f.connect(g); g.connect(bus); o.start(tt); o.stop(tt + 0.15);
+        }
+      },
+      cheer: (t, d = 2.2, v = 0.16) => {
+        noise(t, d, 'bandpass', 1100, 0.6, v, 0.25, 0, bus);
+        for (let i = 0; i < 7; i++) { const tt = t + H(t * 3 + i) * 0.5; const f0 = 260 + H(i * 9 + t) * 260; const o = tone(tt, f0, d * 0.7, 0.025, 'sawtooth', 0.15, (H(i) - 0.5), bus, f0 * 1.3, 1800); }
+      },
+      drumroll: (t, d) => { let x = 0; while (x < d) { K.snare(t + x, 0.07 + 0.12 * (x / d), bus); x += Math.max(0.035, 0.11 - 0.07 * (x / d)); } },
+      crash: (t, v = 0.3) => noise(t, 1.6, 'highpass', 4500, 0.5, v, 0.002, 0, bus),
+      sting: (t) => { S.crash(t, 0.22); [60, 64, 67, 72].forEach((m, i) => { K.pluck(t + i * 0.06, m + 12, 0.9, 0.09, bus); }); K.kick(t, 0.8, bus); K.bell(t + 0.25, 84, 0.08, bus, 1.4); },
+      stamp: (t) => { tone(t, 120, 0.18, 0.6, 'sine', 0.002, 0, bus, 50); noise(t, 0.08, 'lowpass', 900, 0.7, 0.4, 0.002, 0, bus); },
+      flip: (t) => { for (let i = 0; i < 4; i++) noise(t + i * 0.05, 0.03, 'bandpass', 2600 + i * 300, 2, 0.2, 0.001, 0, bus); },
+      ding: (t, m = 91) => K.bell(t, m, 0.14, bus, 1.0),
+      sparkle: (t) => [84, 88, 91, 96, 100].forEach((m, i) => K.bell(t + i * 0.06, m, 0.05, bus, 0.5)),
+      trombone: (t, short = false) => {
+        const notes = short ? [55, 51] : [58, 57, 56, 55];
+        notes.forEach((m, i) => {
+          const dur = i === notes.length - 1 ? 1.4 : 0.42; const tt = t + i * 0.48;
+          const o = K.ctx.createOscillator(); o.type = 'sawtooth'; o.frequency.value = midi(m - 12);
+          const f = K.ctx.createBiquadFilter(); f.type = 'lowpass'; f.Q.value = 6; f.frequency.setValueAtTime(400, tt); f.frequency.linearRampToValueAtTime(1500, tt + 0.15); f.frequency.linearRampToValueAtTime(500, tt + dur);
+          const g = K.ctx.createGain(); g.gain.setValueAtTime(0.0001, tt); g.gain.exponentialRampToValueAtTime(0.18, tt + 0.05); g.gain.setValueAtTime(0.18, tt + dur - 0.1); g.gain.exponentialRampToValueAtTime(0.0001, tt + dur);
+          if (i === notes.length - 1) { const l = K.ctx.createOscillator(); l.frequency.value = 6; const lg = K.ctx.createGain(); lg.gain.value = 5; l.connect(lg); lg.connect(o.frequency); l.start(tt); l.stop(tt + dur); }
+          o.connect(f); f.connect(g); g.connect(bus); o.start(tt); o.stop(tt + dur + 0.05);
+        });
+      },
+      cricket: (t, d) => { for (let x = 0; x < d; x += 0.9) for (let k = 0; k < 3; k++) tone(t + x + k * 0.06, 4300, 0.035, 0.04, 'sine', 0.003, 0.4, bus); },
+      rain: (t, d) => noise(t, d, 'lowpass', 1500, 0.3, 0.07, 0.8, 0, bus),
+      wind: (t, d) => noise(t, d, 'bandpass', 500, 0.8, 0.08, d * 0.4, 0, bus, 900),
+      type: (t, n = 8) => { for (let i = 0; i < n; i++) noise(t + i * 0.085, 0.02, 'bandpass', 3200, 3, 0.18, 0.001, 0, bus); },
+      steps: (t, d, rate = 0.32, v = 0.18) => { for (let x = 0; x < d; x += rate) tone(t + x, 90, 0.06, v, 'sine', 0.002, x % (rate * 2) < rate ? -0.2 : 0.2, bus, 60); },
+      car: (t) => { [0, 0.22].forEach((x) => { tone(t + x, 440, 0.16, 0.12, 'square', 0.004, 0, bus, null, 2000); tone(t + x, 554, 0.16, 0.1, 'square', 0.004, 0, bus, null, 2000); }); const o = tone(t + 0.6, 60, 2.2, 0.18, 'sawtooth', 0.2, 0, bus, 140, 500); },
+      smash: (t) => { noise(t, 0.35, 'highpass', 1800, 0.5, 0.4, 0.001, 0, bus); for (let i = 0; i < 5; i++) tone(t + i * 0.04, 1800 + H(i + t) * 2400, 0.12, 0.06, 'sine', 0.001, 0, bus); },
+      moo: (t) => { tone(t, 150, 1.0, 0.25, 'sawtooth', 0.15, 0, bus, 110, 700); },
+      poof: (t) => noise(t, 0.5, 'lowpass', 2500, 0.5, 0.3, 0.01, 0, bus, 300),
+      buzz: (t) => tone(t, 110, 0.35, 0.18, 'square', 0.004, 0, bus, null, 900),
+      shh: (t) => noise(t, 0.7, 'highpass', 3500, 0.6, 0.1, 0.1, 0, bus),
+      boom: (t) => { tone(t, 70, 1.6, 0.7, 'sine', 0.003, 0, bus, 32); noise(t, 0.6, 'lowpass', 400, 0.5, 0.25, 0.003, 0, bus); },
+      slide: (t) => tone(t, 1400, 0.9, 0.14, 'sine', 0.01, 0, bus, 180),
+      scribble: (t, d = 1) => { for (let x = 0; x < d; x += 0.11) noise(t + x, 0.07, 'bandpass', 2200 + H(x * 9 + t) * 1800, 2, 0.06, 0.01, 0, bus); },
+    };
+    return S;
+  }
+
+  function cueSfx(S) {
+    const c = TL.cue;
+    const Q = [];
+    const q = (t, fn) => Q.push([t, fn]);
+    // 转场
+    TL.scenes.forEach((s, i) => { if (i > 0) q(s.start, (t) => S.whoosh(t, 0.4, 0.14)); });
+    // hook
+    q(c('hook', 0, 0.05), S.pop); q(c('hook', 1, 0.1), (t) => S.whoosh(t, 0.5));
+    q(c('hook', 2, 0), S.boing); q(c('hook', 2, 0.4), (t) => S.coins(t, 8));
+    q(c('hook', 3, 1.4), S.click); q(c('hook', 3, 1.45), (t) => S.ding(t)); q(c('hook', 3, 1.5), (t) => S.cheer(t, 1.2, 0.08));
+    q(c('hook', 4, 0.6), (t) => S.coins(t, 6)); q(c('hook', 5, 0), S.boom); q(c('hook', 5, 2.2), S.stamp);
+    q(c('hook', 6, 0), S.sting); [0, 1, 2, 3, 4, 5].forEach((i) => q(c('hook', 6, 0.15 + i * 0.12), (t) => S.pop(t, 0.18)));
+    // village
+    q(c('village', 1, 0.8), (t) => S.monkey(t, 3)); q(c('village', 1, 2.2), (t) => S.monkey(t, 2));
+    [0, 1, 2].forEach((i) => { q(c('village', 2, 0.4 + i * 1.3), (t) => S.pop(t, 0.2)); q(c('village', 2, 0.9 + i * 1.3), S.buzz); });
+    q(c('village', 3, 0), (t) => S.monkey(t, 4)); q(c('village', 3, 0.3), (t) => S.steps(t, 4, 0.18, 0.12));
+    // arrive
+    q(c('arrive', 0, 0), (t) => S.steps(t, 3.8, 0.34)); q(c('arrive', 1, 0.05), S.boing);
+    q(c('arrive', 2, 0), (t) => S.whoosh(t, 0.3, 0.2)); [0, 1, 2, 3].forEach((i) => q(c('arrive', 2, 0.4 + i * 0.15), (t) => S.pop(t, 0.15)));
+    // ten
+    q(c('ten', 1, 0.2), (t) => S.monkey(t, 2)); q(c('ten', 1, 1.1), S.coin); q(c('ten', 1, 1.3), S.ding);
+    q(c('ten', 2, 0), (t) => S.cheer(t, 2.5)); q(c('ten', 2, 0.2), (t) => S.steps(t, 4, 0.14, 0.14));
+    for (let x = 0; x < 9; x += 0.62) q(c('ten', 3, x), (t) => S.coin(t, 0.08));
+    q(c('ten', 4, 0.5), S.cash);
+    // twenty
+    q(c('twenty', 0, 0.6), (t) => S.monkey(t, 1)); q(c('twenty', 1, 0.3), (t) => S.slide(t));
+    q(c('twenty', 3, 0), S.flip); q(c('twenty', 3, 0.5), S.stamp); q(c('twenty', 4, 0), (t) => S.cheer(t, 3)); q(c('twenty', 4, 1.6), S.pop);
+    // scarce
+    q(c('scarce', 0, 0.3), (t) => S.wind(t, 2)); q(c('scarce', 1, 0.6), S.flip); q(c('scarce', 1, 1.2), S.stamp);
+    [0, 1, 2].forEach((i) => q(c('scarce', 2, 0.6 + i * 0.4), (t) => S.pop(t, 0.18)));
+    q(c('scarce', 3, 0), S.sparkle); q(c('scarce', 3, 0.3), (t) => S.cheer(t, 1.6, 0.1));
+    // fifty
+    q(c('fifty', 0, 0), (t) => S.drumroll(t, TL.cue('fifty', 2, 0) - t));
+    q(c('fifty', 2, 0), S.sting); q(c('fifty', 2, 0.5), (t) => S.cheer(t, 2.5, 0.2));
+    q(c('fifty', 3, 0), S.boing); q(c('fifty', 4, 1.6), S.pop); q(c('fifty', 5, 0.8), S.car);
+    // deal
+    q(c('deal', 1, 0), S.shh); q(c('deal', 2, 1.4), S.pop); q(c('deal', 3, 0), S.pop); q(c('deal', 4, 0.2), S.cash); q(c('deal', 4, 0.5), S.sparkle);
+    // frenzy
+    q(c('frenzy', 0, 0), (t) => S.coins(t, 14)); q(c('frenzy', 0, 1.5), (t) => S.cheer(t, 2));
+    q(c('frenzy', 1, 0.4), S.swish); q(c('frenzy', 1, 1.2), S.smash); q(c('frenzy', 1, 1.3), (t) => S.coins(t, 8));
+    q(c('frenzy', 2, 0.1), S.pop); q(c('frenzy', 2, 1.7), S.moo);
+    q(c('frenzy', 3, 0), (t) => S.steps(t, 3.5, 0.2, 0.12));
+    for (let x = 0; x < 3.6; x += 0.3) q(c('frenzy', 4, x), (t) => S.coin(t, 0.07));
+    q(c('frenzy', 4, 3.4), S.stamp);
+    // gone
+    q(c('gone', 0, 0), S.poof); q(c('gone', 0, 0.3), (t) => S.wind(t, 5));
+    q(c('gone', 1, 0), (t) => S.whoosh(t, 1.2, 0.12));
+    [0, 1, 2].forEach((i) => q(c('gone', 2, i * 1.15), S.flip));
+    q(c('gone', 2, 0), (t) => S.rain(t, TL.cue('gone', 'end', 0) - t));
+    q(c('gone', 3, 0.1), (t) => S.trombone(t)); q(c('gone', 3, 1.5), (t) => S.cricket(t, 4.5));
+    // ledger
+    [1.4, 3.2, 5.0].forEach((x) => q(c('ledger', 1, x), (t) => S.type(t, 9)));
+    q(c('ledger', 2, 0.4), (t) => S.ding(t)); q(c('ledger', 3, 0.6), (t) => S.type(t, 10)); q(c('ledger', 3, 4.6), (t) => S.ding(t, 93));
+    q(c('ledger', 4, 0.3), S.cash); q(c('ledger', 5, 0.4), (t) => S.trombone(t, true)); q(c('ledger', 5, 4), S.stamp);
+    q(c('ledger', 6, 0), (t) => S.whoosh(t, 0.5)); q(c('ledger', 6, 0.4), (t) => S.coins(t, 10));
+    // why
+    [0, 1, 2].forEach((i) => q(c('why', 0, 0.3 + i * 0.3), (t) => S.pop(t, 0.18)));
+    [1, 2, 3].forEach((i) => q(c('why', i, 0), (t) => S.whoosh(t, 0.4, 0.2)));
+    q(c('why', 1, 4.2), S.slide); q(c('why', 2, 0.2), (t) => S.coins(t, 5));
+    [0, 1, 2, 3].forEach((i) => q(c('why', 4, 0.4 + i * 0.7), (t) => S.pop(t, 0.18)));
+    q(c('why', 5, 0), S.boom); q(c('why', 5, 0.6), S.stamp);
+    // real
+    q(c('real', 0, 0.1), S.pop); q(c('real', 1, 1.4), S.stamp);
+    [2, 3, 4].forEach((i) => q(c('real', i, 0), (t) => S.whoosh(t, 0.4, 0.2)));
+    q(c('real', 3, 2.6), S.slide); [0, 1, 2].forEach((i) => q(c('real', 4, 0.3 + i * 0.6), (t) => S.pop(t, 0.18)));
+    [0, 1, 2, 3].forEach((i) => q(c('real', 5, 0.6 + i * 0.9), (t) => S.pop(t, 0.2)));
+    // check
+    q(c('check', 0, 0.6), S.pop); [2, 3, 4].forEach((i) => { q(c('check', i, 0), (t) => S.scribble(t, 1)); q(c('check', i, 2.2), (t) => S.ding(t, 88 + i)); });
+    q(c('check', 5, 0.3), S.boing); q(c('check', 5, 1.6), S.stamp);
+    // outro
+    q(c('outro', 0, 1.3), S.buzz); q(c('outro', 0, 2.9), S.buzz); q(c('outro', 1, 0.3), S.whoosh);
+    q(c('outro', 2, 2.6), S.click); q(c('outro', 2, 2.65), (t) => S.ding(t)); q(c('outro', 2, 2.7), (t) => S.cheer(t, 1.5, 0.1));
+    [0, 1, 2].forEach((i) => q(c('outro', 2, 0.8 + i * 0.3), (t) => S.pop(t, 0.15)));
+    q(c('outro', 3, 0), S.sting); q(c('outro', 3, 0.3), (t) => S.monkey(t, 3));
+    return Q;
+  }
+
+  /* ---------- 加载旁白 ---------- */
+  const voCache = {};
+  async function loadVO(decodeCtx, onProgress) {
+    let done = 0;
+    const lines = TL.lines;
+    const pool = 6; let idx = 0;
+    async function worker() {
+      while (idx < lines.length) {
+        const l = lines[idx++];
+        if (!voCache[l.file]) {
+          const r = await fetch(l.file); if (!r.ok) throw new Error('加载配音失败：' + l.file);
+          const ab = await r.arrayBuffer();
+          voCache[l.file] = await decodeCtx.decodeAudioData(ab);
+        }
+        done++; onProgress && onProgress(done / lines.length);
+      }
+    }
+    await Promise.all(Array.from({ length: pool }, worker));
+  }
+
+  /* ---------- 渲染整条音轨 ---------- */
+  async function renderSoundtrack(onProgress = () => {}, opts = {}) {
+    const len = Math.ceil((TL.total + 0.3) * SR);
+    const ctx = new OfflineAudioContext(2, len, SR);
+    await loadVO(ctx, (p) => onProgress(p * 0.4, '加载配音'));
+    const master = ctx.createGain(); master.gain.value = 0.95;
+    const comp = ctx.createDynamicsCompressor(); comp.threshold.value = -14; comp.ratio.value = 3; comp.attack.value = 0.005; comp.release.value = 0.2; comp.knee.value = 8;
+    master.connect(comp); comp.connect(ctx.destination);
+    const musicBus = ctx.createGain(); musicBus.gain.value = opts.music != null ? opts.music : 0.5;
+    const duck = ctx.createGain(); duck.gain.value = 1;
+    musicBus.connect(duck); duck.connect(master);
+    const sfxBus = ctx.createGain(); sfxBus.gain.value = opts.sfx != null ? opts.sfx : 0.85; sfxBus.connect(master);
+    const voBus = ctx.createGain(); voBus.gain.value = opts.vo != null ? opts.vo : 1.25; voBus.connect(master);
+    // 事件队列：所有音符/音效先登记，渲染时按时间窗口用 suspend() 分批创建节点，
+    // 避免一次性创建上万个节点导致离线渲染极慢。
+    const EV = [];
+    const defer = (obj) => { const o = {}; Object.keys(obj).forEach((k) => { o[k] = typeof obj[k] === 'function' ? (t, ...a) => EV.push([t, () => obj[k](t, ...a)]) : obj[k]; }); return o; };
+    // 旁白 + 闪避
+    if (!opts.noVO) TL.lines.forEach((l, i) => {
+      EV.push([l.start, () => { const s = ctx.createBufferSource(); s.buffer = voCache[l.file]; s.connect(voBus); s.start(l.start); }]);
+      const next = TL.lines[i + 1];
+      duck.gain.setTargetAtTime(0.38, Math.max(0, l.start - 0.12), 0.05);
+      if (!next || next.start - l.end > 0.7) duck.gain.setTargetAtTime(1, l.end + 0.15, 0.25);
+    });
+    const K = makeKit(ctx, musicBus);
+    if (!opts.noMusic) scheduleMusic(defer(K), musicBus);
+    const SK = makeKit(ctx, sfxBus);
+    const S = makeSfx(SK, sfxBus);
+    if (!opts.noSfx) cueSfx(S).forEach(([t, fn]) => { if (t >= 0 && t < TL.total) EV.push([t, () => fn(t)]); });
+    EV.sort((a, b) => a[0] - b[0]);
+    // 结尾淡出
+    master.gain.setValueAtTime(0.95, TL.total - 1.5); master.gain.linearRampToValueAtTime(0.0001, TL.total + 0.2);
+    const WIN = 2;
+    let ei = 0;
+    const flush = (until) => { while (ei < EV.length && EV[ei][0] < until) { try { EV[ei][1](); } catch (e) { console.warn(e); } ei++; } };
+    flush(WIN + 0.05);
+    for (let x = WIN; x < TL.total + 0.3; x += WIN) {
+      const xx = x;
+      ctx.suspend(xx).then(() => { flush(xx + WIN + 0.05); onProgress(0.4 + 0.6 * Math.min(1, xx / TL.total), '合成音乐与音效'); ctx.resume(); });
+    }
+    const buf = await ctx.startRendering();
+    onProgress(1, '完成');
+    return buf;
+  }
+
+  window.AUDIO = { renderSoundtrack, SR };
+})();

shouhouzi/js/engine.js

@@ -246,7 +246,8 @@
     D.boil = Math.floor(t * 8);
     const { sc, lt } = TL.at(t);
     const scene = window.SCENES[sc.id];
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    const z = opts.scale || 1;
+    ctx.setTransform(z, 0, 0, z, 0, 0);
     ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over';
     ctx.fillStyle = '#fbf3e1'; ctx.fillRect(0, 0, Lo.W, Lo.H);
     const S = {
@@ -254,10 +255,10 @@
       ls: (i) => lt - sc.L[i],
     };
     ctx.save();
-    ctx.setTransform(Lo.k, 0, 0, Lo.k, Lo.sx, Lo.sy);
+    ctx.setTransform(Lo.k * z, 0, 0, Lo.k * z, Lo.sx * z, Lo.sy * z);
     try { scene && scene(ctx, lt, S); } catch (e) { console.error(sc.id, e); }
     ctx.restore();
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.setTransform(z, 0, 0, z, 0, 0);
     // 颗粒与暗角
     ctx.save(); ctx.globalAlpha = 0.07; ctx.globalCompositeOperation = 'multiply';
     ctx.fillStyle = ctx.createPattern(getGrain(), 'repeat'); ctx.fillRect(0, 0, Lo.W, Lo.H); ctx.restore();
@@ -272,14 +273,14 @@
   }
 
   /* ---------- 封面 ---------- */
-  function renderCover(ctx, Lo) {
+  function renderCover(ctx, Lo, z = 1) {
     D.boil = 3;
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.setTransform(z, 0, 0, z, 0, 0);
     ctx.fillStyle = '#fbf3e1'; ctx.fillRect(0, 0, Lo.W, Lo.H);
-    ctx.save(); ctx.setTransform(Lo.k, 0, 0, Lo.k, Lo.sx, Lo.sy);
+    ctx.save(); ctx.setTransform(Lo.k * z, 0, 0, Lo.k * z, Lo.sx * z, Lo.sy * z);
     window.SCENES.__cover(ctx, Lo.name === 'portrait');
     ctx.restore();
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.setTransform(z, 0, 0, z, 0, 0);
     ctx.save(); ctx.globalAlpha = 0.07; ctx.globalCompositeOperation = 'multiply';
     ctx.fillStyle = ctx.createPattern(getGrain(), 'repeat'); ctx.fillRect(0, 0, Lo.W, Lo.H); ctx.restore();
     const P = Lo.name === 'portrait';
@@ -289,6 +290,8 @@
       D.text(ctx, '一个寓言，看懂所有泡沫', 540, 468, 54, '#fff');
       D.bigText(ctx, '你会花35块', 470, 1320, 92, '#fff');
       D.bigText(ctx, '买一只猴子吗？', 470, 1440, 92, '#ffcd3c');
+      D.rrect(ctx, 190, 1560, 700, 96, 46, 4, 1); D.fs(ctx, '#2b2321', 0);
+      D.text(ctx, '博傻理论 · 泡沫真相 · 动画讲解', 540, 1609, 46, '#ffcd3c');
     } else {
       D.bigText(ctx, '收猴子的故事', 960, 150, 150, '#ffcd3c', { rot: -0.03 });
       D.rrect(ctx, 600, 238, 720, 84, 40, 2, 1); D.fs(ctx, '#ff5b4f', 6);

shouhouzi/js/exporter.js

@@ -0,0 +1,123 @@
+/* =========================================================
+ * exporter.js —— 浏览器本地渲染导出 MP4
+ * WebCodecs(VideoEncoder H.264 + AudioEncoder AAC/Opus) + mp4-muxer
+ * 逐帧离线渲染（不依赖实时播放），帧率 24/30/60 可选
+ * ========================================================= */
+(function () {
+  const AVC_CANDIDATES = ['avc1.640034', 'avc1.640033', 'avc1.640032', 'avc1.64002A', 'avc1.640028', 'avc1.4D4033', 'avc1.4D4028', 'avc1.42E034', 'avc1.42E01F'];
+
+  async function pickVideoConfig(W, H, fps, bitrate) {
+    if (typeof VideoEncoder === 'undefined') throw new Error('当前浏览器不支持 WebCodecs（VideoEncoder）。请使用最新版 Chrome / Edge 桌面版。');
+    for (const hw of ['prefer-hardware', 'no-preference', 'prefer-software']) {
+      for (const codec of AVC_CANDIDATES) {
+        const cfg = { codec, width: W, height: H, bitrate, framerate: fps, hardwareAcceleration: hw, avc: { format: 'avc' }, latencyMode: 'quality', bitrateMode: 'variable' };
+        try { const r = await VideoEncoder.isConfigSupported(cfg); if (r.supported) return { cfg: r.config, mux: 'avc' }; } catch (e) { /* 继续尝试 */ }
+      }
+    }
+    // 兜底：没有 H.264 编码器（如部分 Linux 版 Chromium）时改用 VP9（MP4 封装）
+    for (const codec of ['vp09.00.41.08', 'vp09.00.40.08', 'vp09.00.31.08']) {
+      const cfg = { codec, width: W, height: H, bitrate, framerate: fps, latencyMode: 'quality' };
+      try { const r = await VideoEncoder.isConfigSupported(cfg); if (r.supported) return { cfg: r.config, mux: 'vp9' }; } catch (e) { /* */ }
+    }
+    throw new Error('当前浏览器的 H.264 编码器不支持 ' + W + '×' + H + '@' + fps + 'fps。');
+  }
+  async function pickAudioConfig() {
+    if (typeof AudioEncoder === 'undefined') return null;
+    const base = { sampleRate: 48000, numberOfChannels: 2, bitrate: 192000 };
+    for (const [codec, mux] of [['mp4a.40.2', 'aac'], ['opus', 'opus']]) {
+      try { const r = await AudioEncoder.isConfigSupported(Object.assign({ codec }, base)); if (r.supported) return { cfg: r.config, mux }; } catch (e) { /* */ }
+    }
+    return null;
+  }
+
+  function supportInfo() {
+    return {
+      webcodecs: typeof VideoEncoder !== 'undefined',
+      fsapi: typeof window.showSaveFilePicker === 'function',
+    };
+  }
+
+  /**
+   * opts: { mode:'landscape'|'portrait', fps, bitrate, range:[t0,t1], audio:AudioBuffer|null,
+   *         onProgress(p, info), signal:{aborted}, saveToDisk:boolean, filename }
+   */
+  async function exportMP4(opts) {
+    const L = LAYOUTS[opts.mode];
+    const fps = opts.fps;
+    const [t0, t1] = opts.range || [0, TL.total];
+    const dur = t1 - t0;
+    const nFrames = Math.round(dur * fps);
+    const vcfg = await pickVideoConfig(L.W, L.H, fps, opts.bitrate);
+    const acfg = opts.audio ? await pickAudioConfig() : null;
+
+    let fileHandle = null, writable = null, target;
+    if (opts.saveToDisk && typeof window.showSaveFilePicker === 'function') {
+      fileHandle = await window.showSaveFilePicker({ suggestedName: opts.filename, types: [{ description: 'MP4 视频', accept: { 'video/mp4': ['.mp4'] } }] });
+      writable = await fileHandle.createWritable();
+      target = new Mp4Muxer.FileSystemWritableFileStreamTarget(writable);
+    } else {
+      target = new Mp4Muxer.ArrayBufferTarget();
+    }
+    const muxer = new Mp4Muxer.Muxer({
+      target,
+      video: { codec: vcfg.mux, width: L.W, height: L.H, frameRate: fps },
+      audio: acfg ? { codec: acfg.mux, sampleRate: 48000, numberOfChannels: 2 } : undefined,
+      fastStart: writable ? false : 'in-memory',
+      firstTimestampBehavior: 'offset',
+    });
+
+    let encErr = null;
+    const venc = new VideoEncoder({ output: (chunk, meta) => muxer.addVideoChunk(chunk, meta), error: (e) => { encErr = e; } });
+    venc.configure(vcfg.cfg);
+
+    // —— 音频：一次性编码 ——
+    if (acfg) {
+      const aenc = new AudioEncoder({ output: (chunk, meta) => muxer.addAudioChunk(chunk, meta), error: (e) => { encErr = e; } });
+      aenc.configure(acfg.cfg);
+      const buf = opts.audio, SR = buf.sampleRate;
+      const s0 = Math.round(t0 * SR), s1 = Math.min(buf.length, Math.round(t1 * SR));
+      const c0 = buf.getChannelData(0), c1 = buf.numberOfChannels > 1 ? buf.getChannelData(1) : c0;
+      const CH = 4800;
+      for (let s = s0; s < s1; s += CH) {
+        const n = Math.min(CH, s1 - s);
+        const data = new Float32Array(n * 2);
+        data.set(c0.subarray(s, s + n), 0); data.set(c1.subarray(s, s + n), n);
+        const ad = new AudioData({ format: 'f32-planar', sampleRate: SR, numberOfFrames: n, numberOfChannels: 2, timestamp: Math.round((s - s0) / SR * 1e6), data });
+        aenc.encode(ad); ad.close();
+        if (aenc.encodeQueueSize > 50) await new Promise((r) => setTimeout(r, 0));
+      }
+      await aenc.flush(); aenc.close();
+    }
+
+    // —— 视频：逐帧渲染 ——
+    const canvas = document.createElement('canvas'); canvas.width = L.W; canvas.height = L.H;
+    const ctx = canvas.getContext('2d', { alpha: false });
+    const started = performance.now();
+    const gop = fps * 2;
+    for (let i = 0; i < nFrames; i++) {
+      if (opts.signal && opts.signal.aborted) { venc.close(); if (writable) await writable.abort().catch(() => {}); throw new Error('已取消导出'); }
+      if (encErr) throw encErr;
+      const t = t0 + i / fps;
+      ENGINE.render(ctx, t, L, {});
+      const vf = new VideoFrame(canvas, { timestamp: Math.round(i * 1e6 / fps), duration: Math.round(1e6 / fps) });
+      venc.encode(vf, { keyFrame: i % gop === 0 });
+      vf.close();
+      if (venc.encodeQueueSize > 6) await new Promise((r) => { const h = () => { venc.removeEventListener('dequeue', h); r(); }; venc.addEventListener('dequeue', h); setTimeout(h, 50); });
+      if (i % 10 === 0) {
+        const el = (performance.now() - started) / 1000;
+        const p = (i + 1) / nFrames;
+        opts.onProgress && opts.onProgress(p, { frame: i + 1, total: nFrames, elapsed: el, eta: el / p - el, codec: vcfg.cfg.codec, audio: acfg ? acfg.mux : '无' });
+        await new Promise((r) => setTimeout(r, 0));
+      }
+    }
+    await venc.flush(); venc.close();
+    if (encErr) throw encErr;
+    muxer.finalize();
+    opts.onProgress && opts.onProgress(1, { frame: nFrames, total: nFrames, elapsed: (performance.now() - started) / 1000, eta: 0, codec: vcfg.cfg.codec, audio: acfg ? acfg.mux : '无' });
+    if (writable) { await writable.close(); return { savedToDisk: true, codec: vcfg.cfg.codec, audio: acfg && acfg.mux }; }
+    const blob = new Blob([target.buffer], { type: 'video/mp4' });
+    return { blob, codec: vcfg.cfg.codec, audio: acfg && acfg.mux };
+  }
+
+  window.EXPORTER = { exportMP4, supportInfo };
+})();

shouhouzi/js/publish.js

@@ -0,0 +1,37 @@
+/* =========================================================
+ * publish.js —— 抖音 / 哔哩哔哩 发布文案（标题、简介、标签）
+ * B站简介中的章节时间戳根据时间轴自动生成
+ * ========================================================= */
+(function () {
+  const mmss = (t) => { t = Math.floor(t); return String(Math.floor(t / 60)).padStart(2, '0') + ':' + String(t % 60).padStart(2, '0'); };
+  function chapters() {
+    return TL.scenes.map((s, i) => `${mmss(s.start)} ${i === 0 ? '开场：10块钱收猴子，你干不干？' : s.title}`).join('\n');
+  }
+  function build() {
+    const dur = mmss(TL.total);
+    return {
+      douyin: {
+        name: '抖音（竖屏 1080×1920）',
+        fields: [
+          { k: '标题', v: '10块钱一只收猴子，为什么全村人最后都亏了？' },
+          { k: '标题（备选）', v: '有人高价收猴子，全村抢着卖，结局却让人后背发凉…' },
+          { k: '作品描述', v: '一个经济学寓言，讲透所有泡沫的底层剧本：\n制造需求 → 抬高价格 → 让你接盘 → 庄家离场。\n下次有人跟你说“稳赚不赔”“等老板回来就翻倍”，先看看笼子里装的，是不是猴子🐒\n你身边见过哪些“收猴子”的套路？评论区聊聊👇\n#经济学 #收猴子的故事 #博傻理论 #金融知识 #投资理财 #认知提升 #涨知识 #动画科普' },
+          { k: '话题标签', v: '#经济学 #收猴子的故事 #博傻理论 #金融知识 #投资理财 #认知提升 #涨知识 #动画科普 #知识分享 #泡沫' },
+          { k: '封面文字建议', v: '你会花35块，买一只猴子吗？' },
+        ],
+      },
+      bilibili: {
+        name: '哔哩哔哩（横屏 1920×1080）',
+        fields: [
+          { k: '标题', v: '【经济学动画】10块钱收猴子，全村却倒亏2万？一个寓言看懂所有泡沫｜收猴子的故事' },
+          { k: '标题（备选）', v: '商人高价收猴子，村民为什么会抢着接盘？博傻理论动画讲解' },
+          { k: '简介', v: `经济学里有个著名的寓言——“收猴子的故事”。\n商人10块、20块、25块一只收猴子，最后宣布50块一只；助手却把笼子里的猴子35块一只卖回给村民……\n这支 ${dur} 的动画，带你算清这笔账，看懂“唯一买家”“赚钱效应”和“博傻理论”，以及现实里那些换了道具的“猴子”。\n\n【章节】\n${chapters()}\n\n【识别猴子三问】\n① 抛开价格，它本身有什么用？\n② 现在是谁在买？为什么买？\n③ 如果再也没人接盘，我还愿意拿着吗？\n\n本视频为经济学寓言科普，不构成任何投资建议。\n觉得有收获的话，一键三连支持一下～` },
+          { k: '标签（最多10个）', v: '经济学,收猴子的故事,博傻理论,泡沫经济,金融知识,投资理财,动画科普,知识分享,郁金香泡沫,涨知识' },
+          { k: '分区建议', v: '知识 → 财经商业' },
+          { k: '动态文案', v: '新视频：10块钱收猴子的故事🐒 一个寓言看懂所有泡沫的剧本，看完你还敢接盘吗？' },
+        ],
+      },
+    };
+  }
+  window.PUBLISH = { build, chapters, mmss };
+})();

shouhouzi/tools/audio-test.html

@@ -0,0 +1,7 @@
+<!doctype html><meta charset="utf-8"><body>
+<script src="../js/script-data.js"></script><script src="../js/draw.js"></script><script src="../js/scenes.js"></script><script src="../js/engine.js"></script><script src="../js/audio.js"></script>
+<script>
+// tools 目录下需修正配音相对路径
+TL.lines.forEach(l=>{ if(!l.file.startsWith('../')) l.file='../'+l.file; });
+window.go=async(o)=>{ try{ const b=await AUDIO.renderSoundtrack(()=>{},o||{}); window.SND=b; return b.duration;}catch(e){return 'ERR '+e.message} };
+</script>