好事發生數位AI

用 OpenClaw + AI 自動做出一部課程影片：Remotion + Fish Audio 完整實戰教學

Gary
2026/3/2

用 AI 深入探索這篇文章

點選下方平台，從消費者角度快速整理重點、追問問題與站內延伸閱讀

ChatGPTGoogle AI

本文由 AI SEO 自動化行銷 搭配 Openclaw 撰寫完成，中間經過專業顧問的經驗輔助撰寫內容，所有外部參考資料皆來自專業的單位。若你也想要提升你的工作效率或是導入AI到你的公司，歡迎前往查看 AI導入企業顧問服務。

用 OpenClaw + AI 自動做出一部課程影片，這是我們的完整過程

大部分人做課程影片的流程是：寫腳本 → 錄影 → 剪輯 → 上字幕 → 輸出。光是剪輯加字幕就能吃掉一整個下午。

我們換了一條路：讓 OpenClaw 搭配其他 AI 工具，全自動產出影片。

用 JSON 定義腳本結構，Claude Code 寫場景元件和修 bug，Fish Audio 自動生成語音，Remotion 把 React 元件渲染成影片，最後一行指令輸出 MP4。從第一版到修完所有 bug、拿到成品，整個過程在一個工作日內完成。

先看成品：

影片成品：OpenClaw AI Agent 從零到一

https://www.youtube.com/watch?v=LIVeuxOQnw4

👉 點此在 YouTube 上觀看完整影片

這篇文章記錄我們從零到完成這部 3 分鐘課程影片的完整過程，包含技術選型、AI 工具怎麼搭配、實際踩到的坑、以及每個問題的修復方案。

為什麼選 Remotion？程式化影片的優勢

Remotion 是一套用 React 寫影片的開源框架。它的概念很簡單：每一幀都是一個 React 元件的渲染結果。

這代表你可以用寫前端的方式做影片 — useState 管狀態、spring() 做動畫、 排場景順序。對工程師來說，這比學 Premiere 或 After Effects 直覺得多。

我們選 Remotion 的理由：

特性Remotion傳統剪輯軟體線上影片工具
場景可重複使用✅ React 元件❌ 手動複製⚠️ 有限模板
版本控制✅ Git 管理❌ 無❌ 無
自動化 Pipeline✅ CLI 一行指令❌ 手動操作⚠️ API 有限
中文字型支援✅ Google Fonts✅ 本地安裝⚠️ 有限
語音整合✅ 程式串接 TTS❌ 手動錄音⚠️ 部分支援
費用免費（開源）月費制月費制

我們的技術棧：

  • Remotion v4.0.431 — 影片框架核心
  • React 19 + TypeScript 5.7 — 場景元件開發
  • Fish Audio S1 模型 — 中文語音合成（TTS）
  • FFmpeg / FFprobe — 音檔時長偵測
  • Noto Sans TC / Noto Serif TC — Google 中文字型

專案結構：一個影片長什麼樣子

整個專案的結構像一個標準的 React 專案，但產出不是網頁，而是 MP4：

  1. STEP 01
    lessons/01-overview.json
    手寫的課程腳本（JSON 格式）
  2. STEP 02
    src/scripts/course-pipeline.ts
    自動化 Pipeline（TTS + 時長計算）
  3. STEP 03
    src/components/scenes/
    10 種場景元件（標題、段落、程式碼、架構圖…）
  4. STEP 04
    src/components/shared/
    共用元件（背景、動畫、進度條）
  5. STEP 05
    public/audio/
    Fish Audio 生成的語音檔
  6. STEP 06
    public/lesson-storyboard.json
    Pipeline 產出的最終腳本（含精確時長）

腳本格式：用 JSON 寫劇本

傳統的影片腳本是 Word 文件，我們的腳本是 JSON。每個場景定義三件事：類型、視覺內容、旁白文字。

{
  "type": "section",
  "heading": "為什麼需要 Multi-Agent？",
  "highlight": "一個 ChatGPT 視窗做不了所有事情...",
  "voiceoverText": "你可能會問，我用 ChatGPT 不就好了嗎？...",
  "visualHint": { "iconPreset": "ai" },
  "durationInFrames": 900
}

type 決定用哪個 React 元件來渲染這個場景。我們一共做了 10 種場景類型：

場景類型用途視覺效果
title影片開場品牌 Logo + 主標題 + 副標題
section章節轉場大標題 + 重點摘要卡片
bullet-points列點說明逐條 fade-in 動畫
architecture架構圖節點 + 連線動畫
terminal終端機操作打字機效果 + 輸出動畫
code-editor程式碼展示VS Code 風格 + 行高亮
comparison比較表格表格逐行滑入
statistic數據強調數字跳動 + 粒子爆發
faqQ&A問答交替動畫
cta結尾行動呼籲脈動按鈕 + 光暈效果

Pipeline：一行指令從腳本到成品

整個製作流程被封裝成一條自動化 Pipeline：

npx tsx src/scripts/course-pipeline.ts lessons/01-overview.json

這行指令做了四件事：

  1. STEP 01
    讀取 JSON 腳本
    解析所有場景與旁白文字
  2. STEP 02
    呼叫 Fish Audio TTS
    每個場景的旁白自動轉語音（MP3）
  3. STEP 03
    計算精確時長
    用 FFprobe 偵測音檔長度，自動調整場景 duration
  4. STEP 04
    輸出 Storyboard
    寫入 public/lesson-storyboard.json 供 Remotion 渲染

想直接拿到 MP4？加上 --render 參數：

npx tsx src/scripts/course-pipeline.ts lessons/01-overview.json --render

Fish Audio TTS：中文語音合成

我們用 Fish Audio 的 S1 模型做語音合成。它的中文品質在目前的 TTS 服務裡算是前段班，而且支援自訂語速。

Pipeline 裡做了一件重要的事：TTS 文字正規化。中文 TTS 引擎碰到數字和英文版本號時容易念錯，所以我們在送出文字前先做轉換：

原始文字轉換結果原因
2026二零二六年份要逐字念
v4.0.431四點零點四三一版本號要念出小數點
80%百分之八零百分比要自然念法
10x一零倍倍數轉中文

踩坑紀錄：三個 Bug 與修復方案

第一版影片跑起來後，我們實際預覽發現了三個問題。這裡記錄每個 bug 的根因和修復方式。

Bug 1：語音講完了，畫面還在發呆

現象：每個場景的語音講完後，畫面靜止不動好幾秒才切到下一場。整部影片總長 7 分 24 秒，但語音內容加起來只有 3 分鐘出頭。

根因：Pipeline 用 Math.max(originalFrames, audioFrames) 計算場景時長 — 它只會把場景「延長」到音檔長度，但永遠不會「縮短」。問題是 JSON 腳本裡的預設時長設太高（按預估值設的），實際音檔遠短於預設。

場景JSON 預設實際音檔多出的靜止時間
section「為什麼需要 Multi-Agent」30 秒12.6 秒17.4 秒
terminal「openclaw init」35 秒10.7 秒24.3 秒
code-editor「openclaw.json」40 秒12.4 秒27.6 秒

修復：改成以音檔長度為主，只保留最低下限：

// 改前：只延長不縮短
scene.durationInFrames = Math.max(originalFrames, audioFrames);

// 改後：語音為主，3 秒最低避免太短
const MIN_FRAMES = 90; // 3 秒
scene.durationInFrames = Math.max(MIN_FRAMES, audioFrames);

修完後重新計算所有場景時長，影片從 7:24 縮短到 3:04，每個場景語音講完後約 0.5 秒就切到下一場。

Bug 2：同一段文字左右重複顯示

現象：「為什麼需要 Multi-Agent？」這個場景，螢幕左右兩邊顯示一模一樣的文字。

根因：SectionScene.tsx 在沒有程式碼片段的情況下，左欄放了 data.highlight（重點摘要），右欄也放了 data.highlight。這是從短影片版本留下來的設計 — 短影片用重複強調效果，但課程影片裡看起來就是 bug。

修復：沒有程式碼時，移除右欄，改成單欄置中：

// 改前：左右都顯示 highlight
{!hasCode && (
  <GlassCard variant="default">
    <AnimatedText text={data.highlight} />  {/* 右欄重複 */}
  </GlassCard>
)}

// 改後：沒有 code 就不顯示右欄
{hasCode && (
  <div style={{ flex: 1 }}>
    <MockupWindow code={visualHint.codeSnippet} />
  </div>
)}

Bug 3：CTA 按鈕跑到左邊變成黃色長條

現象：最後的 CTA 場景，「LEARN MORE」按鈕沒有置中，而是變成一條黃色長條貼在螢幕最左邊。

根因：Remotion 的 元件內部會建立一個 position: absolute 的 容器。這個絕對定位把按鈕從 flex 佈局中拉出去，回落到 left: 0, top: 0。

修復：在 加上 layout="none"，讓它不產生額外的定位容器：

// 改前：Loop 預設建立 absolute-fill 容器
<Loop durationInFrames={PULSE_DURATION}>
  <PulseButtonInner />
</Loop>

// 改後：layout="none" 不產生定位容器
<Loop durationInFrames={PULSE_DURATION} layout="none">
  <PulseButtonInner />
</Loop>

這個坑特別難發現，因為它只在動畫開始後才出現（按鈕 opacity 從 0 fade in），而且在 Remotion Studio 的預覽裡不容易察覺。我們是用 npx remotion still 指令逐幀截圖才定位到問題的。

成品：3 分鐘課程影片

修完三個 bug 後，最終輸出的成品：

項目數值
影片長度3 分 4 秒
解析度1920 × 1080（Full HD）
幀率30 FPS
場景數量14 個
檔案大小17.6 MB
字幕SRT + VTT 雙格式

整部影片包含：架構圖動畫、終端機打字效果、程式碼高亮、比較表格、數據跳動、脈動 CTA 按鈕 — 全部用 React 元件實作，不需要任何影片剪輯軟體。

從這個專案學到的事

Remotion 的真正優勢不是「省時間」

第一次建專案、寫元件、調動畫，花的時間不會比剪輯軟體少。但 Remotion 的價值在可重複性：

  • 要做第二支影片？換一份 JSON 就好
  • 要改品牌色？改 theme.ts 全部場景一起變
  • 要加新場景類型？寫一個 React 元件就完成
  • 要自動化？Pipeline 已經在那裡了

根據我們的經驗，第一支影片花了一整天，但用同一套系統做第二支影片，從腳本到成品只需要 20 分鐘。

Fish Audio 的中文品質夠用但有限制

S1 模型的中文發音自然度不錯，但碰到英文專有名詞（如 "OpenClaw"、"Gateway"）和數字格式時會出問題。我們的做法是在 Pipeline 裡做文字正規化前處理，把數字轉中文、版本號加「點」字。

用 remotion still 做 Debug

Remotion Studio 的預覽在某些場景（如 內的元件）不容易看出問題。最可靠的 debug 方式是 npx remotion still 逐幀截圖，直接看實際渲染結果，這比在預覽裡播放更精確。

完整技術清單與開源資源

如果你想用同樣的方式做影片，以下是所有用到的工具：

工具用途連結
RemotionReact 影片框架github.com/remotion-dev/remotion
Fish Audio中文語音合成fish.audio
FFmpeg音檔處理ffmpeg.org
Noto Sans TCGoogle 中文字型fonts.google.com
React 19UI 框架react.dev
TypeScript型別安全typescriptlang.org

安裝指令：

# 建立 Remotion 專案
npx create-video@latest my-video

# 安裝 FFmpeg（macOS）
brew install ffmpeg

# 安裝中文字型支援
npm install @remotion/google-fonts

常見問題

Remotion 適合做什麼類型的影片？

最適合結構化、可重複、需要自動化的影片類型：課程教學、產品介紹、數據報告、SaaS Demo。不適合需要真人出鏡或複雜轉場特效的影片。

Fish Audio TTS 的費用怎麼算？

Fish Audio 採用按量計費，S1 模型每 1000 字約 US$0.01-0.02。我們這部 3 分鐘影片的 14 段語音，TTS 費用不到 US$0.5。

不會寫程式可以用 Remotion 嗎？

需要基本的 React / TypeScript 能力。如果你會寫前端，上手門檻很低 — Remotion 的 API 設計跟寫一般 React 元件幾乎一樣。如果完全不會程式，建議先從 Remotion 的官方教學開始。

為什麼不直接用 Premiere 或 CapCut？

對於一次性的影片，剪輯軟體更快。但如果你要批量生產結構相似的影片（例如每週出一支課程影片），程式化的方式在第二支以後就會開始省時間，而且品質一致、不會手殘。

看完教學，來看成品

這部用 OpenClaw + Remotion + Fish Audio 全自動產出的課程影片已經上線，👉 點此在 YouTube 上觀看：OpenClaw AI Agent 從零到一

---

本文為 Ohya 原創內容，結合實際專案開發經驗撰寫。文中提到的所有工具均為開源或有免費方案，讀者可自行嘗試。

💡 本文製作說明：本文由 AI SEO 流程，搭配人工審核調閱資料所製作，若你對於自動化 SEO 操作有興趣，可參閱我們的 AI SEO 服務。

本文由 AI SEO 自動化行銷 搭配 Openclaw 撰寫完成，中間經過專業顧問的經驗輔助撰寫內容，所有外部參考資料皆來自專業的單位。若你也想要提升你的工作效率或是導入AI到你的公司，歡迎前往查看 AI導入企業顧問服務。

想讓 AI 幫你做 SEO？

我們的 AI SEO 服務提供客製化的 SEO 策略規劃，幫助你建立完整的工作流程，從關鍵字研究到內容優化，全面提升搜尋能見度。

了解 AI SEO 服務
←Back to Blog
用 OpenClaw + AI 自動做出一部課程影片：Remotion + Fish Audio 完整實戰教學