# 不用安装剪辑软件，AI 配音、字幕和视频导出都在浏览器完成：开源 Timeline Studio

做短视频时，你是否也遇到过这些问题？

- 为了完成一次简单剪辑，要先安装体积庞大的桌面软件；
- 素材必须上传服务器，隐私和等待时间难以控制；
- AI 配音、自动字幕和高清导出分散在多个工具里；
- 手机与桌面项目来回迁移，工程很难继续编辑；
- AI Agent 可以生成文案，却很难稳定、可逆地修改时间线。

我们一直在尝试解决这些问题，于是有了 **Timeline Studio**：一款本地优先、开源、直接运行在现代浏览器中的 AI 视频编辑器。

项目地址：https://github.com/MartinDelophy/ai-video-editor

在线体验：https://video-editor.ai-creator.top/

## 一、Timeline Studio 是什么？

Timeline Studio 把接近剪映/CapCut 的多轨时间线、浏览器端 AI 能力和离线视频渲染放进同一个工作区。

它的核心理念是：

> 让视频项目尽可能留在用户设备上，让 AI 真正参与可继续编辑、可撤销、可验证的创作流程。

打开网页后，用户可以导入图片、视频和音频，在时间线上完成画面编排、字幕、贴纸、配音、音乐、画中画与属性调整，并直接在浏览器中预览和导出。

## 二、为什么强调“本地优先”？

Timeline Studio 的主要编辑状态、媒体处理和已支持的 AI 推理都尽可能在浏览器本地完成。

这带来几个直接好处：

- 素材不必为了基础剪辑上传到远程编辑后端；
- 浏览器可按需缓存 AI 模型，重复使用时无需每次重新下载；
- 工程可以导出为可移植的 `.timeline` 文件；
- 用户可以保存工程、迁移设备，之后继续编辑；
- 支持安装为 PWA，获得更接近桌面应用的使用方式。

需要使用在线模型或第三方生成服务的能力，仍然取决于对应服务配置；本地优先并不意味着所有 AI 模型都能在每台设备上离线运行。

## 三、像专业剪辑软件一样组织时间线

Timeline Studio 不是只有一个上传按钮和“自动生成”按钮，而是一套可手工控制的多轨编辑工作区。

目前编辑器包含：

- 连续的主画面轨；
- 图片和视频画中画/Overlay；
- 字幕轨与字幕样式；
- 可调整时长的贴纸轨；
- 配音、视频原声与背景音乐轨；
- 片段移动、裁剪、切分、复制和删除；
- 时间线磁吸、对齐线、缩放和撤销/重做；
- 画布内移动、缩放和旋转；
- 遮罩、滤镜、效果、动画、速度和关键帧；
- 针对触屏重新设计的移动端时间线与属性面板。

项目不是一次性生成的黑盒视频。字幕、声音、素材位置和时间关系都继续保留在时间线上，用户可以随时接手修改。

## 四、浏览器里的 AI 配音与自动字幕

Timeline Studio 将常见的音视频 AI 能力放进编辑工作流，而不是让用户频繁导入导出中间文件。

### 4.1 多语言 AI 配音

中文配音使用浏览器 Piper/VITS ONNX 路径，英文提供 Kokoro 82M，并为德语、西班牙语、法语、意大利语和巴西葡萄牙语提供浏览器 Piper 声音。

生成后的声音会成为时间线上的可编辑配音片段，而不是只能试听或下载的孤立结果。

### 4.2 Whisper 自动字幕

自动字幕默认使用 Whisper small q8 ONNX。识别结果会结合音频能量调整字幕边界，使字幕片段更接近实际语音节奏；中文流程还会进行克制的高置信上下文纠错。

### 4.3 人声分离与智能画面

编辑器支持在浏览器工作流中进行人声分离，将人声与伴奏放入对应音轨；智能画面能力则可以进行主体检测、人像抠图、智能裁切和字幕避让。

### 4.4 数字人工作流

项目还在探索 JoyVASA 音频驱动与 LivePortrait 神经渲染，让配音、角色画面和时间线继续保持在同一个可编辑项目里。

## 五、预览和最终导出为什么要分开？

视频编辑器的实时预览追求流畅，而最终导出追求确定性和画面一致性。Timeline Studio 因此采用两条路径：

- 播放预览使用浏览器原生媒体能力，保证编辑时响应及时；
- 最终导出使用 WebCodecs 驱动的离线合成流程；
- 画面、字幕、贴纸、画中画、效果、变换和音频混音在同一个合成逻辑中处理；
- 不支持 WebCodecs 的环境提供 MediaRecorder 兼容回退。

这一设计的目标是让预览与最终文件尽量保持 WYSIWYG，同时允许程序化测试去解码并验证导出文件的尺寸、时长、画面和音轨。

## 六、`.timeline`：可以继续编辑的可移植工程

Timeline Studio 可以把项目导出为 `.timeline` 工程包。它不只是保存一个最终视频，还会保存项目结构和工程需要的媒体数据。

这意味着：

1. 在浏览器中完成一个项目；
2. 导出 `.timeline`；
3. 在另一台设备或之后的会话中重新导入；
4. 恢复媒体和时间线，继续编辑。

可移植工程也是 Timeline Studio Agent 自动化能力的基础。

## 七、让 AI Agent 修改工程，而不是模拟鼠标

项目已经发布第一版 **versioned headless command runner**。它是一个面向 Agent 和脚本的本地命令执行层，可以：

- 检查 `.timeline` 工程；
- 校验带版本和 revision 的 JSON 编辑计划；
- dry-run 并查看修改前后的差异；
- 事务化执行一组命令，失败时不留下“只改了一半”的工程；
- 使用幂等 operation ID，避免重复执行同一操作；
- 保存新的 `.timeline` 工程，同时保留归档中的媒体文件。

首版原生命令主要覆盖配音片段移动、关联字幕同步、字幕文本修改，以及字幕与音频的关联/解除。素材导入、AI 生成和最终渲染等尚未进入命令注册表的能力，目前仍通过浏览器兼容路径完成。

它不是远程控制网页的“鼠标机器人”。更准确地说，它让 AI 能够稳定修改可移植工程文件，再由用户将结果导回在线编辑器。随着命令范围扩大，它将成为自动剪辑、批量字幕处理和可复现视频工作流的基础。

## 八、桌面与手机都不是“附带支持”

很多 Web 编辑器只是把桌面布局压缩到手机屏幕。Timeline Studio 将移动端视为触控优先的垂直剪辑工作区：

- 预览画面保持醒目；
- 时间线紧邻预览；
- 工具和属性使用有边界的底部抽屉；
- 时间线围绕固定居中播放头滚动；
- 片段选择后出现类型对应的操作栏；
- 拖动、裁剪、缩放和纵向滚动按触控手势重新设计。

响应式一致性被当作发布要求，而不是项目完成后的补丁。

## 九、快速开始

在线使用：

https://video-editor.ai-creator.top/

本地运行：

```bash
git clone https://github.com/MartinDelophy/ai-video-editor.git
cd ai-video-editor
npm install
npm run dev
```

运行 Agent 工程检查：

```bash
npm run agent -- inspect /absolute/path/project.timeline
```

执行经过校验的编辑计划：

```bash
npm run agent -- run /absolute/path/edit-plan.json
```

首次使用某项 AI 能力时可能需要下载对应模型，之后会优先复用浏览器缓存。运行大型模型时，推荐使用支持 WebGPU 的现代 Chromium 浏览器。

## 十、技术栈与工程方向

- React + Vite；
- WebCodecs / Canvas / OfflineAudioContext；
- ONNX Runtime Web、Piper/VITS、Kokoro、Whisper；
- Service Worker 与 PWA；
- 可移植 `.timeline` ZIP 工程；
- Vitest 与浏览器端到端验证；
- MIT License。

当前开发重点包括提高离线导出的稳定性、完善桌面和移动端时间线交互、扩充 Agent 命令覆盖，以及为真实工程建立更完整的回归测试。

## 十一、欢迎体验和参与

Timeline Studio 仍在持续快速迭代。浏览器媒体、WebCodecs、WebGPU、ONNX、时间线交互和移动端剪辑都存在大量值得深入的问题。

如果你对这个方向感兴趣，欢迎：

- 打开在线编辑器体验真实工作流；
- 在 GitHub 提交可复现的问题；
- 参与 Discussions，分享需求和作品；
- 贡献测试、翻译、文档或聚焦的小型修复；
- 如果项目对你有帮助，点亮一个 Star。

项目地址：https://github.com/MartinDelophy/ai-video-editor

在线体验：https://video-editor.ai-creator.top/