编辑文档 - HyperFrames 口播视频升级：Whisper 字幕同步 + 视频支持 + FFmpeg 调速

标题

工具栏

点击或拖拽上传图片

支持 PNG, JPG, GIF, WebP 格式

内容 (Markdown 格式)

![050901.png](/uploads/f463a5f9fa6e428cb0e9ec544415f803.png)
【预留：前两篇文章链接位置】

---

随着 HyperFrames 不断深入使用，发现可玩的花样真的很多。

上一版口播视频跑通之后，有个问题一直让我不舒服——字幕和语音对不上。

不是文案的问题，是 TTS 合成出来的音频，实际朗读时长和预设的完全不一样。有的人口播文案写得很顺畅，但 TTS 念出来反而显得拖沓；有的干脆被截断了，结尾几个字没念完。

这不是 HyperFrames 的问题，是我的 workflow 有问题：**用预设的时间戳去套实际音频，怎么可能对得上。**

所以这次升级，核心就做一件事：**让字幕时间戳去适配真实音频，而不是让音频去迁就预设时间戳。**

---

## 核心升级点

### 1. Whisper 音频识别生成精确字幕时间戳

之前的工作流：
```
写文案 → 估算时间戳 → TTS 合成 → 硬套预设时间戳 → 字幕对不上
```

现在的工作流：
```
写文案 → TTS 合成 → Whisper 识别真实时间戳 → 用真实时间戳渲染 → 字幕完全对齐
```

具体来说，TTS 合成完音频之后，用 Whisper 做一次语音识别。Whisper 会输出每个词、每句话的精确开始和结束时间。把这些时间戳提取出来，写入 HTML 的 `data-start` 和 `data-duration`，字幕就和语音完全对上了。

**Whisper 模型选择**：

| 模型 | 速度 | 精度 | 推荐场景 |
|------|------|------|----------|
| base | 最快 | 基础 | 快速预览（这次用的就是这个） |
| small | 快 | 较好 | 一般精度需求 |
| medium | 慢 | 高 | 重要视频专业制作 |

执行命令：
```bash
python python/whisper_transcribe.py voiceover.mp3 --model base -o transcription.json
```

Whisper 输出长这样：
```json
{
  "segments": [
    {"start": 0.0, "end": 2.62, "text": "你有没有过这种崩溃时刻"},
    {"start": 2.62, "end": 9.32, "text": "重复操作上百次、网页按钮小到点不准"}
  ]
}
```

直接拿 `start` 和 `end - start` 作为字幕的 `data-start` 和 `data-duration`，零误差。

---

### 2. 中区支持视频播放，不只是图片

之前的版本中区只能放截图图片，这次支持直接嵌入视频了。

**支持图片 + 视频混排**：
```html
<img id="media1" class="screenshot-img" src="./pic/1.png" alt="截图1" />
<video id="media2" class="screenshot-video" src="./pic/demo.mp4" muted playsinline preload="auto"></video>
```

视频要能自动播放，有几个必填属性：
- `muted`：不加这个浏览器会阻止自动播放
- `playsinline`：移动端自动播放必需
- `preload="auto"`：预加载视频内容

JS 里通过 `videoEl.play()` 触发播放。

---

### 3. FFmpeg 预制加速版本，解决时长不匹配

如果原视频太长，需要加速放进来。以前想用 JS 的 `playbackRate`，但这玩意儿兼容性差，很多播放器不支持。

现在改成：**用 FFmpeg 提前生成加速版本**，直接修改原文件。

**计算加速倍数**：
```
加速倍数 = 原视频时长 / 目标时长
```

**FFmpeg 加速命令**：
```bash
# 示例：原视频44秒，目标19秒，加速倍数 ≈ 2.3
ffmpeg -i 原视频.mp4 -filter:v "setpts=PTS/2.3" -af "atempo=2.3" -c:v libx264 -c:a aac 加速版视频-2x.mp4 -y
```

注意：
- 音频加速 `atempo` 最大支持 2.0 倍，超过的需要分两步
- 命名规范用 `-2x` 后缀（如 `demo-2x.mp4`）
- 预制版本比 JS `playbackRate` 可靠太多

---

### 4. 背景音乐音量控制

之前背景音乐音量没控制好，有时候盖过人声。这次把背景音乐固定在 0.15 的音量，刚好能烘托气氛但不抢戏。

HTML 里直接写：
```html
<audio id="bgm" data-start="0" data-duration="{TOTAL_DURATION}" data-track-index="99" src="./music.mp3" data-volume="0.15"></audio>
```

---

## 升级后的完整流水线

```
Step 1: 收集素材信息（截图数量、视频数量）
Step 2: 生成三段式文案（上区标题、中区媒体、下区字幕）
Step 3: 生成口播文案（与上区/下区文案对应）
Step 4: TTS 合成口播音频
Step 5: Whisper 识别音频生成精确时间戳
Step 6: 生成 Markdown 文档
Step 7: 生成 HyperFrames HTML（使用 Whisper 时间戳）
Step 8: 渲染视频（音频自动合成）
```

核心变化：**先有 TTS 音频，再生成字幕时间戳**。这是正确顺序。

---

## 技术细节

### 口播文案生成规则

口播文案是对上区和下区文案的完整朗读脚本，长度约 80-120 字，时长约 15-25 秒。

**结构**：痛点共鸣 → 场景列举 → 解决方案 → 价值承诺

**示例（browser-use）**：
```
你有没有过这种崩溃时刻？重复操作上百次、网页按钮小到点不准、多个标签来回切换。browser-use解决这一切——用自然语言告诉AI你想做什么，它帮你操控浏览器。精准点击、多任务管理、复杂操作全自动。效率提升10倍，开源免费，开发者必装！
```

注意口播文案**不包含任何 CTA 引导话术**，比如"请在评论区留言"之类的。

### TTS 配置

| 参数 | 值 |
|------|-----|
| API | 阿里云百炼 CosyVoice |
| 音色 | longanling_v3 |
| 语速 | 1.2 |
| 格式 | MP3 |

调用命令：
```bash
python python/tts_synthesize.py "口播文案文本" --voice longanling_v3 --rate 1.2 -o voiceover.mp3
```

---

## 踩坑记录

**坑1：字幕和语音对不上**
- 原因：用的预设时间戳，不是真实音频时间戳
- 解决：TTS 合成后接 Whisper 识别，用真实时间戳渲染

**坑2：视频无法自动播放**
- 原因：缺少 `muted` 属性，浏览器安全策略阻止
- 解决：video 标签必须加 `muted playsinline preload="auto"`

**坑3：JS playbackRate 加速无效**
- 原因：很多播放器不支持这个属性
- 解决：用 FFmpeg 预制加速版本

**坑4：背景音乐盖过人声**
- 原因：音量默认 1.0，太大
- 解决：固定 0.15，或根据实际情况调整

---

## 下一步

字幕同步的问题解决了，接下来想继续打磨视频的整体质感。目前有几个方向在考虑：

- **分区布局优化**：中区截图区域目前比较线性，后续尝试更灵活的分镜组合
- **背景图升级**：现在用的背景图比较朴素，后面考虑更精美的渐变或动态背景
- **文字排版**：主标题和字幕的字体、字重、间距还有调整空间

---

**大家在用 HyperFrames 做视频的时候，有什么想实现但还没搞定的效果？或者有什么方向和建议给到我？评论区聊聊，说不定你的想法会出现在下一版升级里。**

**🎁 福利**：回复"口播升级"，获取本次升级后的完整 Skill 和 Whisper 时间戳脚本。

摘要

标签多个标签用逗号分隔

分类