FlyCut Caption 是一個開源的 React 元件，旨在提供一套完整的影片字幕編輯體驗，結合語音辨識、自動產生字幕、視覺化編輯與影片片段剪裁等功能。

 

主要功能與特色

這個專案具備下列幾個強而有力的特點：

  • 高精度語音辨識：內建使用 Whisper 模型來進行語音轉文字（speech-to-text），能處理多種語言。

  • 視覺化字幕編輯：使用者可以直覺地在介面上操作、選擇要保留或刪除的字幕段落，並即時預覽效果。

  • 即時影片預覽：字幕與影片時間軸同步，支持分段播放（interval playback）以便檢查剪輯後的效果。

  • 多格式匯出支援：可匯出 SRT、JSON 字幕格式，甚至可以輸出剪輯後的影片檔案，支援燒字幕（burn-in）等選項。

  • 字幕樣式可自訂：字型、顏色、位置、背景、透明度等樣式皆可調整，並可即時預覽。

  • 國際化支援：介面支援中文、英文，以及可擴充的多語言包設計（如日語等）

  • 前端運算 + Web Workers：ASR（自動語音辨識）處理在背景執行，不會阻塞主介面。整體是 React + TypeScript + Vite + Tailwind CSS 架構。

  • 模組化元件設計：專案維護性和擴展性佳，可以當作 JS/React 應用中的字幕模組來整合。

 

適合的應用場景

以下是幾種類型的應用場景，特別適合採用 FlyCut Caption：

  • 線上影片編輯平台，在瀏覽器中讓使用者上傳影片、剪輯字幕

  • 語言學習工具，需要自動生成或校正影片字幕

  • 影片後製工具、社群影片製作工具，希望在前端就讓使用者做字幕微調

  • 多語言字幕處理系統，需要可擴充語系、樣式微調

  • 小型專案或內部工具，不願搭建後端語音辨識服務，偏向純前端方案