| name | audio-to-video |
| description | 从音频文件自动生成竖屏短视频。使用 Whisper 语音识别提取字幕时间轴，AI 分析内容结构规划场景，Remotion 渲染带动画的视频。
当用户提到以下场景时触发：音频转视频、语音生成视频、把录音/播客/音频做成短视频、Whisper+Remotion、给音频配画面、音频可视化视频、
自动生成字幕视频、批量制作短视频、根据音频内容生成动画。即使用户只是说"把这段音频做成视频"也应该触发。
|
Audio-to-Video: 音频自动生成竖屏短视频
将一段音频文件转化为带动画、字幕、场景切换的竖屏短视频(1080×1920)。整个流程自动化：语音识别 → 内容分析 → 场景设计 → 动画开发 → 视频渲染。
工作流程
第一步：环境检查与音频转录
检查必要工具是否安装，然后用 Whisper 转录音频：
which ffmpeg || brew install ffmpeg
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 转录结果后：
- 校正识别错误 — Whisper 对中文常见错误：同音字替换、专有名词错误、断句不准。逐条对照修正。
- 分析内容结构 — 找出音频的叙事结构（开场hook、背景铺垫、核心观点、总结、CTA等）
- 拆分场景 — 按内容逻辑拆分为 5-10 个场景，每个场景 5-20 秒
- 提取关键词 — 为每条字幕标注需要高亮的关键词，为每个场景提取视觉关键词
输出为结构化数据 src/data/subtitles.ts，格式参见 references/subtitles-template.ts。
第三步：Remotion 项目搭建
在工作目录中初始化项目：
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 × 秒数
- 场景时间范围不要有间隙，否则会出现黑屏
