传统视频编辑器通常使用固定倍速控制片段速度，但一个完整镜头往往包含起步、推进、高潮和收束等不同节奏阶段。
我们在浏览器视频编辑项目 Timeline Studio 中实现了一套可编辑的速度曲线。用户可以拖动和添加节点，也可以直接调整每个阶段的播放速度。系统会同步更新片段时长、时间轴、播放头、关联原声和预览画面。
本文将介绍速度曲线的产品设计、浏览器端时间映射方案，以及它如何成为未来可解释 AI 自动剪辑的基础控制层。
关键词：浏览器视频编辑、AI剪辑、速度曲线、时间重映射、WebGPU、React
一、为什么固定倍速不够用
常见的视频变速功能通常只有一个数值：
- 0.5倍慢放
- 1倍正常播放
- 2倍快速播放
这种方式可以整体改变片段速度，却无法描述片段内部的节奏变化。
以一段产品操作视频为例：
- 开场需要正常播放，让观众理解场景。
- 重复操作可以逐渐加速。
- 关键按钮点击前可以短暂减速。
- 结果出现时需要保持清晰。
- 结尾需要放缓，为说明文字留下时间。
如果只能使用固定倍速，创作者通常需要先切割视频，再为每个子片段设置不同速度。
这种方式会带来几个问题：
- 时间轴上产生大量碎片。
- 相邻片段之间的速度变化不自然。
- 调整一个阶段可能影响后续所有片段。
- 用户难以从整体上观察视频节奏。
- AI自动剪辑生成的结果也不容易被修改。
因此，我们将播放速度从一个固定数值升级为一条连续曲线。
二、速度曲线的产品结构
Timeline Studio 将一个视频片段划分为四个默认阶段：
- 起步
- 推进
- 高潮
- 收束
这四个名称不是强制的剪辑模板，而是帮助用户理解节奏的语义入口。
每个阶段包含三个核心信息：
- 阶段在片段中的位置
- 阶段播放速度
- 与下一阶段之间的过渡趋势
用户可以在两个区域完成调整。
1. 主曲线编辑器
曲线的横向位置表示片段进度，纵向位置表示播放速度。
用户可以：
- 拖动节点改变速度
- 左右移动节点改变阶段范围
- 双击曲线增加节点
- 开启或关闭平滑连接
- 重置为默认曲线
2. 阶段编辑列表
曲线下方显示每个阶段的名称、时间范围、速度数值和局部趋势。
微型趋势曲线使用不同状态帮助用户快速判断：
- 中性颜色表示速度基本稳定
- 青色上扬表示逐渐加速
- 暖色下落表示逐渐减速
主曲线与阶段列表双向同步。
用户拖动主曲线节点时，阶段数据会立即更新；修改阶段速度时，主曲线也会重新绘制。
三、速度曲线必须改变真实片段时长
实现速度曲线时，不能只修改播放器的瞬时播放速度。
假设原始视频长度为15秒，调整后大部分阶段都在3倍左右播放，那么这个片段在时间轴上的长度应该缩短到约5秒。
如果属性面板显示5秒，但时间轴仍然保留15秒，就会产生状态冲突：
- 时间轴片段宽度不正确
- 预览区总时间仍然是旧值
- 播放头可能进入已经不存在的区域
- 关联音频继续占用原时长
- 导出结果与预览不一致
因此，每次修改曲线后，系统都需要重新计算并更新：
- 当前视频片段时长
- 画面轨道总时长
- 时间轴片段宽度
- 预览总时间
- 视频缩略图数量
- 播放头位置
- 关联原声片段长度
- 导出使用的时间映射
速度曲线不是一个视觉滤镜，而是一项真正改变项目时间结构的编辑操作。
四、时间轴时间与源视频时间并不相同
固定倍速情况下，源视频时间比较容易计算。
例如，一个片段使用2倍速度播放，那么时间轴播放1秒，相当于源视频前进2秒。
速度曲线的情况更加复杂，因为播放速度会持续变化。
时间轴播放到50%时，源视频不一定也播放到50%。
如果前半段速度较快，源视频可能已经播放到70%；如果前半段速度较慢，源视频可能只播放到35%。
因此，系统需要维护两套时间：
- 时间轴时间：片段在编辑项目中的位置
- 源视频时间：当前需要读取的原始视频帧位置
每次预览、跳转或导出时，系统都会根据速度曲线，把时间轴位置转换为源视频位置。
转换过程可以理解为：
- 找到当前时间轴位置所在的曲线区间。
- 计算此前所有区间已经消耗的源视频内容。
- 计算当前区间已经消耗的源视频内容。
- 得到最终的源视频读取位置。
- 将视频元素定位到对应画面。
预览、原声同步和导出必须共用同一套转换逻辑，否则容易出现音画不同步。
五、平滑曲线与真实时间消耗
为了让相邻阶段之间的变化更加自然，我们没有让速度在节点处突然跳变，而是支持平滑连接。
例如，速度从1倍提高到3倍时，不是直接从1切换到3，而是在阶段范围内逐渐提高。
但平滑处理不仅影响曲线外观，也会影响真实时间。
系统不能只读取两个节点的速度，还必须考虑两个节点之间所有中间位置的速度变化。
在实现中，我们会：
- 对相邻节点进行平滑插值。
- 计算整个阶段的平均播放速度。
- 汇总所有阶段得到片段平均速度。
- 根据平均速度更新片段总时长。
- 建立时间轴进度到源视频进度的映射。
这样，界面上的曲线形状才能与实际播放结果保持一致。
六、如何避免调整曲线时预览画面跳动
用户拖动曲线节点时，片段时长可能在几秒内发生较大变化。
假设播放头原来位于第10秒，而调整后的片段总长度只有6秒。如果简单保留原来的时间轴位置，播放头就会直接落到片段末尾。
另一种情况是：播放头仍在有效范围内，但对应的源视频画面已经发生变化，用户会感觉预览突然跳帧。
我们的处理策略是保持当前源画面不变。
调整前，系统先记录当前显示的是源视频中的哪一帧；更新曲线和片段时长后，再反向查找这一帧在新曲线中对应的时间轴位置。
处理流程如下：
记录当前源视频进度
↓
更新速度曲线
↓
重新计算片段时长
↓
根据新曲线反查时间轴位置
↓
移动播放头并保持当前画面
这样可以保证用户在调整速度时始终围绕同一幅画面操作。
七、关联原声如何同步
视频速度改变后，关联原声也需要同步变化。
如果画面进入加速阶段，原声播放速度必须同步提高；如果画面减速，原声也要读取对应的源时间位置。
为了避免音频和视频分别计算时间，我们把速度曲线数据同时传递给关联原声。
在每个播放时刻，系统都会得到：
- 当前关联的画面片段
- 当前时间轴位置
- 对应的源音频位置
- 当前瞬时播放速度
- 该音频片段是否处于有效范围
这让画面和原声可以使用同一条曲线进行时间映射。
如果用户主动解除画面与原声的关联，音频则恢复为独立时间轴片段，不再随画面曲线变化。
八、速度曲线如何接入 AI 自动剪辑
现阶段，Timeline Studio 的速度曲线主要由用户手动编辑。
但这套数据结构也为 AI 自动剪辑提供了一个明确的输出目标。
过去的 AI 剪辑常常直接输出结果，例如：
- 删除一段内容
- 将整个片段设置为2倍速度
- 自动生成一个不可解释的成片
当结果不符合预期时，用户只能重新生成或进入复杂的时间轴继续修改。
引入速度曲线后，AI可以先分析素材，再生成一条可编辑的节奏建议。
AI可以参考的信息包括：
- 镜头变化
- 主体运动速度
- 人物表情变化
- 对白内容
- 停顿位置
- 音频能量
- 音乐节拍
- 字幕关键词
- 产品或动作结果
- 画面清晰度
例如，AI可能生成以下建议：
- 开场保持1倍速度，让观众理解场景。
- 重复操作阶段逐渐提升到2.5倍。
- 关键动作前降低到0.8倍。
- 结果出现时保持1倍，确保信息清晰。
- 结尾逐渐降低速度，为行动引导留出时间。
这些建议最终会转换成速度节点和阶段数据，用户可以继续调整，而不必接受一个完全不可控的结果。
九、让 AI 说明为什么这样调整
速度曲线不仅可以显示结果，还可以承载 AI 的解释。
未来，每个 AI 生成的节点都可以附带调整原因：
- 检测到重复等待，建议加速。
- 关键动作即将发生，建议逐渐减速。
- 当前画面包含重要产品信息，建议保持正常速度。
- 音乐重拍出现在这里，建议将高潮与节拍对齐。
- 人物对白尚未结束，不建议继续加速。
这样，AI不再只是告诉用户“已经完成优化”，而是把自己的剪辑判断展示出来。
用户可以接受某个节点，也可以移动、删除或修改它。
AI负责分析和提出方案，用户继续拥有最终决定权。
十、从速度曲线走向可解释的 AI 创作工具
速度曲线表面上只是一个编辑控件，实际上连接了多个系统：
- 用户交互
- 时间轴状态
- 视频帧读取
- 音频同步
- 预览播放
- 项目保存
- 最终导出
- AI分析结果
它把抽象的“节奏感”转换成了明确、可保存和可修改的数据。
当 AI 能够输出这种结构化数据后，自动剪辑就不必停留在黑盒生成阶段，而可以进入专业编辑流程。
我们希望未来的 AI 视频工具不是替用户完成所有决定，而是降低复杂能力的使用门槛：
- AI理解素材
- AI生成节奏初稿
- AI解释调整原因
- 用户修改关键节点
- 系统保留完整可编辑项目
AI可以提出节奏，人负责决定表达。
这也是 Timeline Studio 接下来希望继续探索的方向。
项目体验
Timeline Studio 是一个运行在浏览器中的视频编辑项目，正在探索时间轴编辑、本地AI、智能画面分析、AI语音、速度曲线和自动剪辑等能力。
在线体验：
https://video-editor.ai-creator.top
GitHub项目：
https://github.com/MartinDelophy/ai-video-editor
如果你也在研究浏览器音视频处理、WebGPU、本地AI或可解释的智能创作工具，欢迎体验项目、提交Issue，或者在GitHub上点一个Star。
