audio-to-video

name	audio-to-video
description	从音频文件自动生成竖屏短视频。使用 Whisper 语音识别提取字幕时间轴，AI 分析内容结构规划场景，Remotion 渲染带动画的视频。 当用户提到以下场景时触发：音频转视频、语音生成视频、把录音/播客/音频做成短视频、Whisper+Remotion、给音频配画面、音频可视化视频、 自动生成字幕视频、批量制作短视频、根据音频内容生成动画。即使用户只是说"把这段音频做成视频"也应该触发。

Audio-to-Video: 音频自动生成竖屏短视频

将一段音频文件转化为带动画、字幕、场景切换的竖屏短视频(1080×1920)。整个流程自动化：语音识别 → 内容分析 → 场景设计 → 动画开发 → 视频渲染。

工作流程

第一步：环境检查与音频转录

检查必要工具是否安装，然后用 Whisper 转录音频：

# 检查 ffmpeg
which ffmpeg || brew install ffmpeg

# 检查 whisper
python3 -c "import whisper" 2>/dev/null || pip3 install openai-whisper

转录代码（保存为临时脚本执行）：

import whisper, json

model = whisper.load_model("base")
result = model.transcribe("音频路径", language="zh", word_timestamps=True, verbose=False)

segments = []
for seg in result["segments"]:
    segments.append({
        "id": seg["id"],
        "start": round(seg["start"], 2),
        "end": round(seg["end"], 2),
        "text": seg["text"].strip()
    })

with open("/tmp/whisper_result.json", "w", encoding="utf-8") as f:
    json.dump({"text": result["text"], "segments": segments}, f, ensure_ascii=False, indent=2)

第二步：文案校正与场景规划

拿到 Whisper 转录结果后：

1. 校正识别错误 — Whisper 对中文常见错误：同音字替换、专有名词错误、断句不准。逐条对照修正。
2. 分析内容结构 — 找出音频的叙事结构（开场hook、背景铺垫、核心观点、总结、CTA等）
3. 拆分场景 — 按内容逻辑拆分为 5-10 个场景，每个场景 5-20 秒
4. 提取关键词 — 为每条字幕标注需要高亮的关键词，为每个场景提取视觉关键词

输出为结构化数据 src/data/subtitles.ts，格式参见 references/subtitles-template.ts。

第三步：Remotion 项目搭建

在工作目录中初始化项目：

# package.json（name 不能含中文）
cat > package.json << 'EOF'
{
  "name": "remotion-video",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "npx remotion studio",
    "render": "npx remotion render src/index.ts MainVideo out/video.mp4"
  }
}
EOF

npm install remotion @remotion/cli @remotion/player react react-dom typescript @types/react @types/react-dom

mkdir -p src/components src/data public out
cp 用户音频路径 public/audio.mp3

创建 tsconfig.json、src/index.ts、src/Root.tsx，格式参见 references/project-template.md。

第四步：场景组件开发

为每个场景创建独立 React 组件。每个场景组件应该：

• 视觉内容与该时段音频内容高度匹配
• 使用 useCurrentFrame() 和 spring()/interpolate() 做动画
• 内容垂直居中，底部留 180px 给字幕
• 字体大于 42px（字幕字号），标题 76px+，核心文字 50px+

常见场景类型和视觉设计模式参见 references/scene-patterns.md。

第五步：字幕系统

字幕组件固定在底部（bottom: 140px），功能：

• 根据当前帧时间匹配对应字幕段
• 关键词用强调色高亮
• Spring 动画入场（上移 + 淡入）

实现参见 references/subtitle-template.tsx。

第六步：主合成串联

MainVideo.tsx 负责把所有部分组装：

• <Audio> 组件播放音频
• 每个场景用 <Sequence> 按时间轴排列
• 场景间淡入淡出过渡（首场景不淡入）
• 字幕层在最上层
• 底部信息栏

实现参见 references/main-template.md。

第七步：预览与渲染

# 预览
npx remotion studio src/index.ts

# 渲染关键帧检查
npx remotion still src/index.ts MainVideo /tmp/preview.png --frame=100

# 最终渲染
npx remotion render src/index.ts MainVideo out/video.mp4 --codec h264

渲染后用 open out/video.mp4 播放检查。

---

设计规范

这套设计语言借鉴 Trae (trae.cn) 的极简科技风格，核心原则是单一强调色 + 高对比度。

配色

角色	色值	用途
背景	#0D0D0D	全局背景，纯黑
主强调色	#00D47E	高亮、编号、分隔线、进度条、字幕关键词——唯一的彩色
警告色	#FF4D4D	仅在负面/警告语义时使用（如骗局、淘汰）
标题	#FFFFFF	场景标题、核心文字
正文	#A0A0A0	副标题、说明文字
弱化	#666666	辅助信息、次要标签
卡片背景	#1A1A1A	所有卡片、容器
卡片边框	rgba(255,255,255,0.08)	细微边框

排版

• 编号标签: [01] [02] 等宽字体(monospace)，绿色 40px
• 场景标题: 白色 76px，900 字重
• 卡片主文字: 42-44px
• 卡片副文字: 30-32px
• 金句/行动文字: 52-54px
• 字幕: 42px，700 字重，固定 bottom: 140px
• 底部信息栏: 22px，#555555

布局

• 画面内容垂直居中（flex + justifyContent: center）
• 底部留 paddingBottom: 180px 给字幕空间
• 左右 padding: 60px
• 分隔线: 从绿色到透明的渐变线

动画

• 入场动画用 spring({ damping: 12, stiffness: 120 })
• 场景过渡用 8 帧淡入淡出
• 循环动画（脉冲、浮动）用 interpolate(frame % N, ...)
• 列表项逐个延迟出现（每项间隔 25 帧）

---

注意事项

• Whisper base 模型对中文准确度有限，务必人工校正关键词和专有名词
• package.json 的 name 字段不能包含中文，否则 npm init 会报错
• Remotion 依赖 Chrome Headless Shell，首次渲染会自动下载
• 音频时长决定总帧数：fps × 秒数
• 场景时间范围不要有间隙，否则会出现黑屏