这个开源工具让视频剪辑变得更简单!AI 自动生成字幕,还能一键裁剪

一、开篇：做字幕太痛苦了

你有没有遇到过这种情况？

场景一：给视频配字幕

你有一个 20 分钟的短视频，想配上字幕。第一反应是什么？

——一个个字手打？或者找某宝花几十块外包？

场景二：剪辑无用片段

视频里有大段废话，想剪掉。但剪完字幕就对不上了，又要重新调整时间轴。

场景三：多语言需求

你想把中文视频配上英文字幕，或者反过来。一个个翻译，简直要命。

这些问题，都可以用 FlyCut Caption 解决。

二、项目简介

FlyCut Caption 是一个 AI 驱动的视频字幕编辑工具。

核心理念：让字幕制作变得像呼吸一样简单。

核心功能

三、核心功能详解

1. 智能语音识别（ASR）

基于 Whisper 模型，在浏览器本地运行 AI 识别：

• ✅ 支持中文、英文、日文等多种语言
• ✅ 不需要联网（本地处理）
• ✅ 识别结果带时间戳

意味着：上传视频 → 选语言 → 等几分钟 → 字幕自动生成。

2. 可视化字幕编辑

生成的字幕可以直接编辑：

• 选择片段：在列表里选中要删除的部分
• 批量操作：全选、批量删除、恢复删除
• 实时预览：点击字幕跳转到对应时间点
• 历史记录：支持撤销/重做

3. 视频预览

• 预览模式：自动跳过删除的片段，预览最终效果
• 快捷键： 
• 空格
  
  ：播放/暂停
• ←/→
  
  ：快退/快进 5 秒
• Shift + ←/→
  
  ：快退/快进 10 秒
• ↑/↓
  
  ：调节音量
• M
  
  ：静音
• F
  
  ：全屏

4. 字幕样式定制

• 字体设置（大小、粗细、颜色）
• 位置调整（显示位置、对齐方式）
• 背景样式（颜色、透明度、边框）
• 实时预览，所见即所得

5. 多格式导出

字幕格式：

• SRT（通用字幕格式）
• JSON

视频格式：

• 仅保留未删除的片段
• 可选择烧录字幕到视频
• 支持不同质量设置
• 多种格式输出

四、技术架构

技术栈

本地 AI 处理

这是最酷的地方——AI 模型在浏览器里本地运行，不需要上传到服务器。

视频文件 → 浏览器本地 → Whisper 模型识别 → 字幕

好处：

• 🔒 隐私安全（视频不上传）
• ⚡ 响应快速（本地计算）
• 🌐 无需联网

Web Workers

ASR 识别在后台线程运行，不会卡主界面。

五、快速开始

环境要求

• Node.js 18+
• pnpm（推荐）或 npm

安装步骤

# 1. 克隆项目git clone https://github.com/x007xyz/flycut-caption.gitcd flycut-caption# 2. 安装依赖pnpm install# 3. 启动开发服务器pnpm dev# 4. 打开浏览器# http://localhost:5173

构建生产版本

pnpm buildpnpm preview

六、使用流程

1. 上传视频

支持的格式：

• 视频：MP4, WebM, AVI, MOV
• 音频：MP3, WAV, OGG

拖拽文件或点击选择。

2. 生成字幕

• 选择识别语言（中文/英文等）
• 点击开始识别
• 等 AI 自动生成带时间戳的字幕

3. 编辑字幕

• 选中要删除的片段
• 批量操作
• 实时预览效果

4. 调整样式

• 字体、颜色、位置
• 背景样式
• 实时预览

5. 导出

• 字幕（SRT/JSON）
• 视频（带/不带字幕）

七、组件化集成

FlyCut Caption 可以作为 React 组件集成到其他项目：

安装

npm install @flycut/caption-react

基本使用

import { FlyCutCaption } from'@flycut/caption-react'import'@flycut/caption-react/styles'functionVideoEditor() {return<FlyCutCaption />}

事件处理

<FlyCutCaption  onFileSelected={(file) =>console.log('选中了文件:', file)}  onSubtitleGenerated={(subtitles) =>console.log('生成了字幕:', subtitles)}  onVideoProcessed={(blob) =>console.log('处理完成:', blob)}  onError={(error) =>console.error('出错了:', error)}/>

八、国际化支持

项目支持 中文、英文、日语，还可以自定义语言包。

内置语言

自定义语言包

const customJaJP = {common: {loading: '読み込み中...',error: 'エラー',  },// ... 更多翻译}<FlyCutCaption  config={{ language: 'ja' }}  locale={customJaJP}/>

九、适用场景

谁最适合用？

• 🎬 短视频创作者 — 需要快速配字幕
• 📚 教育工作者 — 课程视频配字幕
• 🌍 跨境内容创作者 — 多语言字幕
• 📱 自媒体 — 批量处理视频
• 🐛 开发者 — 集成到自己的项目

不适合谁？

• 🎥 专业影视制作 — 需要更专业的工具
• ☁️ 云端处理 — 需要服务器端处理

十、对比其他方案

十一、总结

FlyCut Caption 解决的问题很简单：

做字幕太麻烦 → AI 自动生成 剪辑要对时间轴 → 可视化编辑 导出不方便 → 多格式一键导出

技术亮点：

• 本地 AI 处理（隐私+快速）
• Web Workers 不卡界面
• 组件化设计（可集成）
• 国际化支持

如果你经常需要给视频配字幕，这个工具值得一试——免费、本地、开源。

相关链接

• GitHub：https://github.com/x007xyz/flycut-caption
• 在线演示：本地运行 pnpm dev

点个在看你最好看