html-edge-tts-video: 用AI创建有声视频

在短视频、B站等网站。AI生成的科普介绍视频层出不穷，却常常因为代码门槛高、语音合成难度大、后期剪辑繁琐而让非技术人望而却步。

我把这些痛点拆解成三个主要需求：

• ① 让 AI 自动生成可视化内容
• ② 自动将文字转换为语音并同步字幕
• ③ 一键导出符合短视频网站规范的 MP4 文件

于是诞生了一个开源工具。专为“无代码”使用者建立，让你只需输入主题，就能快速生成专业有声视频。

再看项目亮点，全流程自动化，零编码上手

• 从仅需两份文件来看。scenes.json和body.html就可以完成整个视频。
• 支持Edge TTS语音合成。无需购买商业 API，也不需要配置 API Key。
• 内置 Web Studio 界面所有操作都可在浏览器里完成，无需命令行经验。
• 兼容 Code Agent / Claude / Copilot 等 AI 代码助手，让生成内容更智能、更省时。
• 多分辨率支持，轻松满足抖音、B站、YouTube 等网站需求。

适配你的痛点——快速上手教程

*痛点一：代码写作难度高*

• 方法： 使用内置的提示词生成脚本或直接调用 Code Agent 自动填充scenes.json + body.html.

*痛点二：语音与字幕同步困难*

• 方法： Edge TTS 会自动输出单词边界信息，项目内部根据时间轴精准同步字幕与画面切换。说起来，

*痛点三：后期剪辑耗时*

• 方法： 一次点击导出 MP4。内置转场动画与帧率设置，完全免除手工剪辑。

整体工作流程一览图

1. 准备内容：通过 AI 或手动编写.json/.html
2. TTS 合成：生成音频并获取时间轴信息。
3. Brower 渲染：Palywright 在无界面 Chromium 中渲染每个场景。
4. A/V 合成：Imaageio+FFmpeg 将画面与音频拼接为 MP4。

一步一步跑起来：安装 & 启动 Studio 页面示例

git clone https://github.com/pldz1/html-edge-tts-video.git && cd html-edge-tts-video python main.py install # 安装依赖和 Chromium python main.py studio # 启动本地 Web Studio http这方面，//localhost:8000/studio

Web Studio 功能速览

选择方向后自动设置分辨率；适配教程或短视频网站，根据主题快速生成完整提示词，可复制到任何网页端 AI。其实，一次性导入 AI 返回的文件。自动检查错误，可视化编辑旁白文本、时间轴和字幕位置。多种中文/英文语音可选，实时预听效果。一次点击完成所有场景的语音合成。怎么说呢，720p/1080p/4K 可选；自定义帧率、码率和转场时长。导出前会预览全局进度；不过，支持批量导出多个项目。

功能列表
Create Project
Create Prompt Template
Add Project Data
Edit Scenes & Subtitle
Select Voice
TTS Render
Edit Video Quality
MVP Export MP4

技术实现简析

•    负责文本转语音及时间轴抓取。

•    在无头 Chromium 中渲染 HTML。

•    包装 FFmpeg 完成 A/V 合成。

•    统一管理依赖，不需程序环境配置。

•    提供多种布局模板供快速搭建。

• '轻量级 CLI 与 Web UI 双模式',''方便不同技术水平使用者使用。

• '自带 Chromium 与 FFmpeg',''避免外部依赖冲突。

为什么要选择这个工具？对比传统方法，你会发现以下优势：

\t\t\t\t \t\t\t\t \t\t\t \t\t \t \t \t \t \t \t \t \t \t \t

传统方法<\/th>	本工具<\/th>	结果对比<\/th> <\/ad>

result is a table comparing traditional methods vs this tool. result is an empty table. result is not needed. result will be omitted. result was omitted. result was omitted. result is not required. done.

---