用 HTML 和本地语音模型制作发布短片

一支 App 发布短片，可以从一个 HTML 文件生成：作者用 436 行 HTML 组织画面，让本地语音模型读旁白，再把录屏、转场和配音起点对齐音乐节拍。标题称成片长 94 秒，2,838 帧的渲染耗时为 62 秒，全程没有打开视频编辑器。

对前端开发者有参考价值的，是这套把视频制作拆成素材、脚本、时间轴和检查步骤的办法。不过，渲染快不等于制作全程快，原文也没有交代人工调整花了多久。

一个 HTML 文件，怎样组织一支发布短片

作者先收集品牌素材：字体、Logo、图案和一首音乐，全部来自品牌素材盘，没有另外创造一套视觉风格。

接着写 14 行旁白，每行对应一个真实使用场景。数字写成英文单词，减少语音模型读错的机会；需要停顿的位置加逗号。这份脚本同时承担两项工作：给语音模型提供输入，也给画面划分场景。

声音由本地模型 Kokoro 生成，每行单独输出一个 wav，速度设为 0.92，行间留 0.6 s。画面则使用 11 段去掉原声的手机录屏，把它们放进 CSS 绘制的手机外框里。

这里有两个不同的数量：14 个场景，11 段录屏。原文没有说明它们怎样一一分配，也没有给出完整 HTML，不能据此还原全部编排。

这套方法的起点，是把素材和内容约束提前确定下来。

对 AI 编程而言，这很实用。模型拿到的是明确的品牌资产、固定旁白和现成录屏，需要解决的问题集中在如何编排它们。

为什么节拍和可拖动时间轴比动画花样更重要

作者用 Librosa 分析音乐，得到 112 BPM，再把每句旁白的起点和每次切镜对齐节拍网格。可以把这个网格理解成时间轴上的刻度：声音和画面都沿着同一组刻度安排，更容易形成一致的节奏。

动画使用 GSAP，只操作 transforms 和 opacity。作者还要求动画能够双向拖动，也就是提示词里的 seek-safe：跳到时间轴前后任意位置时，画面都应呈现对应状态，不能依赖之前是否顺序播放过。

下面是作者给出的完整提示词，它把素材路径、配音参数、动画约束和交付检查放到同一份任务说明里：

Build a 90 second launch film for our app as a HyperFrames composition (1920x1080, 30 fps). Brand: everything in brand/, follow brand.md exactly. Footage: the screen recordings in clips/, inside a CSS phone frame. Script: script.txt, one line per scene, numbers as words, do not change the lines. Voice: Kokoro, one wav per line, speed 0.92, 0.6 s gaps. Music: brand/track.wav at 0.16 under the voice; detect its BPM with librosa and snap every line start and cut to the grid. GSAP on transforms and opacity only, seek-safe. Finish with: check at 0 errors, render, and a 12 frame contact sheet.

要留意其中的 do not change the lines 和 seek-safe：前者固定文案，后者约束时间轴行为。它还指定 HyperFrames composition、1920x1080、30 fps，并把背景音乐设为 0.16，放在旁白之下。

原文没有解释，固定的 0.6 s 行间隔如何与节拍对齐同时满足。实际复现时，这部分仍需要明确的时间分配规则。

我的判断

我认可这种把前端能力用于视频编排的思路。CSS 负责外观，GSAP 负责时间轴，语音模型负责旁白，音乐分析负责节奏，职责比较清楚。对于以产品录屏为主、品牌规范已经齐备的短片，这是一条值得尝试的路径。

但它的效率结论需要收窄。作者报告了 436 行 HTML、2,838 帧在 62 秒内完成渲染，没有报告准备素材、生成配音、调试动画和返工的总耗时，也没有与传统视频编辑流程做对照。它目前是一份个人实践记录。

时长也有差异：提示词要求 90 秒，标题写 94 秒；按 30 fps 计算，2,838 帧约为 94.6 秒。原文没有解释为何超出目标。

最后，作者先把 lint 错误清到零，再渲染，并用 12 帧接触表检查各场景。接触表就是把抽取的画面拼在一起查看，适合快速发现布局问题。但 12 帧少于 14 个场景，原文没说明怎样覆盖全部场景；静态画面也无法证明旁白、切镜和音乐衔接都正确。

能拿来做什么

• 为 App 制作录屏发布短片时，可以先整理 brand/、brand.md、clips/ 和 script.txt，让 AI 按已有资产编排画面。
• 生成旁白前，把脚本拆成每场景一行，检查数字读法和停顿位置，再按行生成 wav，方便单独替换有问题的配音。
• 用 GSAP 编排视频时，把双向拖动作为验收条件，检查跳转到不同时间点后，元素状态是否正确。
• 渲染后先用接触表检查构图，再完整播放成片，核对配音、节奏和切镜，并记录制作总耗时，判断是否适合自己的工作流。