---
name: audio-driven-video
description: Turn a voiceover audio file, SRT subtitles, and transcript text into a single-file dynamic web video whose visuals are driven by the audio clock. Use when the user wants a high-impact HTML video, kinetic webpage short, narrated video page, synchronized subtitles, or screen-recordable web video. The only preserved invariant is audio-clock synchronization. CRITICAL: this skill must design fresh, content-specific shots for each project. The reference sample and template scenes are illustrations of method, NOT a menu to copy from.
---

# Audio-Driven Video

从以下素材构建一个自包含的 HTML 视频页：口播音频（mp3/wav）、SRT 字幕时间轴、作为权威文字的逐字稿、可选 BGM。
输出是单个 HTML，用于浏览器全屏播放与录屏。

## 这个 skill 最重要的一件事（先读）

**这个 skill 的能力是"把口播做成贴合内容的动态视频"，不是"套用某一期的镜头"。**

`references/sample-思考vs执行.html` 是一个**案例**，`assets/template.html` 里的 scene 是**示范**。
它们存在的目的是教你"镜头怎么写""什么叫贴合内容"，**绝对不是让你从里面挑动画用**。

每做一期新内容，你必须**为这期内容重新设计镜头**——就像那个样例的作者当初为"思考vs执行"做的那样。
照搬样例的镜头（高塔、火车、印章雨、数字滚动……）到无关内容上，就会产生八股、不应景的视频。这是本 skill 要避免的头号失败模式。

---

## 不可变的约束（这些写死，不许变）

1. **音频是唯一主时钟。** 字幕、镜头切换、进度、BGM 淡入淡出、运动状态，全部从 `audio.currentTime` 派生。不准用独立的 `setTimeout`/`setInterval` 驱动画面。
2. **逐字稿 > SRT 文字。** SRT 给时间，逐字稿给措辞。填 `cues`/`subtitles` 前先用逐字稿订正 SRT 的识别错误。
3. **输出一个 HTML 文件。** 内联 CSS/JS。音频用相对路径引用，除非用户明确要求内嵌。
4. **录屏干净。** 成品里不准有可见的播放控件、调试面板、校准UI、作者工具。只允许"点击开始"遮罩。
5. **每屏只有一个视觉重点。** 关键信息不准被动画盖住。字幕必须和音频同步。

## 你来决定的部分（每期都不同，必须自己想）

- 这期用什么镜头、每个镜头长什么样 —— 由内容决定，见下面 Step 0。
- 配色、字体、风格基调 —— 让它服从内容的情绪（见 `references/STYLE.md`）。
- 用哪些手法（入场动画、高亮、闪切）—— 按需取用，不必全用，也不限于示范里的几个。

---

## Step 0 — 分镜意图表（必做，先于一切代码）

在打开 template、写任何 HTML 之前，先逐句过一遍逐字稿，为每一句产出一行：

| # | 句子 | 功能(钩子/铺垫/反转/数据/结论) | 观众此刻的情绪 | 这句的核心意象 | 拟用视觉 + 为什么 |

填表规则（这几条直接决定能不能去八股）：
- **视觉必须从"核心意象"推导**，不许写"沿用上期"或"模板里有这个"。"上一期这么做"不是合法理由。
- **没有数字的句子，不准用数字滚动；没有对比关系的句子，不准用左右并置。** 手法要对得上内容。
- 想不出意象的句子，就用一句干净大字 + 关键词高亮，**宁可朴素，不要硬塞不相关的炫技动画。**
- 先把这张表输出给用户确认，再开始写代码。

这一步的唯一目的：**强迫先理解内容、再设计画面。** 它一旦做扎实，八股基本就消失了。

## Workflow

1. **做 Step 0 的分镜意图表**，发给用户确认。
2. 读 `references/STYLE.md`，理解"镜头如何贴合内容"的原则与正反案例。
3. 读 `references/PIPELINE.md`，处理真实素材、BGM、字幕订正、校准、录屏导出。
4. 从 `assets/template.html` 取**技术骨架**（主时钟、cqh单位、闪切、canvas、HUD、字幕系统——这些照用）。
5. **根据意图表，在 template 的 SCENE 区和 `tpl()` 里新建本期需要的镜头。** 示范的 3 个 scene 只作参考；复用它们仅当本期内容确实需要那个效果。
6. 把镜头切换对齐口播的自然停顿。当前高冲击风每镜头约 2.5–6 秒，按语义调整。
7. 校验：

```bash
node skills/audio-driven-video/scripts/validate_html.js path/to/output.html
```

## 数据结构速查

`template.html` 顶部注入三个数组：
- `cues`: 每镜头一条。`{d:持续秒, f:"镜头类型名", cut:"red|blue|white", ...自定义字段}`。`f` 对应 `tpl()` 里的分支。
- `subtitles`: `[{start, end, text}]`。
- `subtitleKeywords`: 要在字幕里标红的关键词数组。

新增镜头 = 在 `tpl()` 加一个 `if(c.f==="你的名字")` 分支返回 HTML + 在 SCENE 区写它的 CSS。
HTML 里的文字应来自 cue 字段（`c.t`、`c.s` 等），**不要把整句话焊死在 `tpl()` 里**——那样镜头就绑死了内容，没法复用结构。

## File Map

```text
skills/audio-driven-video/
├─ SKILL.md
├─ assets/template.html              # 技术骨架 + 3个示范scene
├─ references/
│  ├─ STYLE.md                       # 视觉原则 + 正反案例(去八股核心)
│  ├─ PIPELINE.md                    # 真实素材/校准/录屏导出
│  └─ sample-思考vs执行.html          # 参考案例（只读，禁止直接复用其镜头）
└─ scripts/
   ├─ create_project.js              # 生成初稿(只搭结构，镜头仍需手设计)
   └─ validate_html.js
```
