用 AI 做带歌词的音乐视频：从翻车到部署上线
用 AI 把一首歌做成带滚动歌词的 MV，再部署到网上——从方案翻车、Remotion 逐帧渲染，到 CloudStudio / Cloudflare Pages / R2 部署的完整踩坑记录。
用 AI 做一首带滚动歌词的音乐视频，再部署到网上，让任何人点开就能看——我的个人网站上作品区的一个歌曲视频，就是用AI做的
这个视频从制作到部署上线花了好几天，其中被 AI 带到沟里好几次。这篇文章把我走过的弯路和最终成功的路都写出来，保证你读完就能避坑，也能依葫芦画瓢弄一个自己的出来
一、先准备好三样“食材”
不管用什么方案，你先在电脑上准备好这三个文件：
- 1. 歌曲文件（MP3 或 M4A 都行）
- 2. 专辑封面图（正方形图片，JPG/PNG）
- 3. 带时间轴的 LRC 歌词文件（就是每一句前面有
[00:12.34]那种格式）
💡 如果你没有 LRC 歌词，可以搜“歌词 + LRC 下载”，或者用在线工具把普通歌词转成 LRC。
准备好后，放在同一个文件夹里，方便后面用。
二、第一次尝试：AI 提议的“复杂方案”（翻车现场）
我用的 AI 助手是 Hy3 模型（当时免费），我告诉它我的需求：做一个网页，中间显示专辑图，歌词随着歌曲滚动，并且当前歌词要高亮。
AI 立刻给出了方案：
- • 用 HTML 播放器 播放音乐
- • 用 无头浏览器（Puppeteer）对播放画面逐帧截图
- • 再把所有截图合成为视频文件
听起来很高级对吧？AI 拍着胸脯说“没问题”，然后开始写代码。
翻车点①：歌词高亮死活做不出来
AI 改了好几版，每次都说“这次肯定行了”，结果刷新页面一看，当前歌词还是灰的。它一会儿说 CSS 选择器错了，一会儿说 JavaScript 计时器不准，但就是修不好。
翻车点②：歌词和歌曲进度对不上
歌词总是快几秒或慢几秒，AI 又说“时间轴解析有误”“播放器缓冲导致”，反复调偏移量，但永远对不齐。
就这样折腾了一整晚，AI 最后自己不好意思了，主动说：“要不我们换一种方案吧？”
我立马同意。结果它分析了一通后，承认了原有方案根本行不通，我心里一万个“草泥马”奔过。
三、血的教训：动手前一定要先确认方案是否可行
这次经历给我最大的教训就是：
不要让 AI 自由发挥，它为了显得“能干”会选最花哨但最不靠谱的路。
正确做法是：你先花 5 分钟上网搜一下“网页播放器 + 歌词滚动 + 视频合成”有没有现成的成熟方案，调研一下相关技术栈
如果你确实不懂技术，也可以多去几个AI模型问问，互相验证一下是否可行，最终拿出一个靠谱的方案。总之这一步，一定需要你自己参与抉择，不能完全交给AI
四、最终方案：Remotion 框架 + 逐帧渲染截图合成视频
4.1 什么是 Remotion？
Remotion 是一个基于 React 的框架，它的核心理念非常独特：把视频的每一帧都当成一张 React 渲染出来的画面，再把这些画面按顺序拼成视频。
通俗点说：
- • 你写 React 代码来描述“每一帧长什么样”
- • Remotion 会逐帧渲染出所有画面（比如 30fps 的视频，一分钟就是 1800 帧）
- • 最后用 FFmpeg 把这些帧拼接成一个 MP4 视频文件
这意味着：你不需要在时间轴上拖拽素材，只需要写代码描述每一帧的样子，Remotion 自动帮你生成视频。而且它支持音频嵌入，渲染时能精确同步音频和画面。
4.2 为什么最终选 Remotion？
| 对比项 | 纯前端播放器（旧方案） | Remotion 逐帧渲染（新方案） |
| 产出物 | 网页链接（需在线访问） | MP4 视频文件（可下载、可分享） |
| 歌词同步 | 依赖浏览器实时播放 | 渲染时精确对齐每一帧 |
| 分享方式 | 必须部署到云平台 | 直接发文件，或上传到任何视频平台 |
| 视觉效果 | 受限于浏览器 CSS | 可做频谱、波形等高级动效 |
五、部署上线：从 CloudStudio 到 Cloudflare 的曲折
第一次部署：CloudStudio（免费，但有个致命缺陷）
AI 推荐用 CloudStudio，因为它能一键部署静态网页，并生成一个公网链接。
我照做后，链接发到手机上打开，能播，但进度条拖不动——只能从头听到尾，想跳转到中间？没门。
AI 解释说：CloudStudio 的静态服务器不支持 HTTP 区间请求（Range Request），而浏览器拖动进度需要这个功能。它建议我换到支持该功能的平台。
第二次部署：Cloudflare Pages（还是拖不动？）
我搜了一下，发现 Cloudflare 是大名鼎鼎的 CDN 提供商，应该支持区间请求。于是让 AI 帮我研究怎么部署到 Cloudflare Pages。
跟着 AI 的指引，我注册了 Cloudflare 账号，创建了令牌，把 HTML 文件上传上去。结果——依然拖不动！
我逼问 AI，它这才吞吞吐吐地说：“呃……视频（歌曲）文件不能放在 Pages 的静态目录里，要放在 Cloudflare R2（对象存储）里，然后通过签名 URL 播放。”
第三次部署：Cloudflare R2（终于成功了）
R2 是 Cloudflare 的云存储，类似 AWS S3，但它支持 Range 请求，而且有免费额度（10GB 存储 + 每月下载流量），对个人小项目完全够用。
步骤很简单（AI 帮我写的脚本）：
- 1. 在 Cloudflare 控制台开通 R2
- 2. 创建一个存储桶（Bucket），比如
my-music - 3. 把你的歌曲文件和图片上传到 R2 桶里
- 4. 生成一个公开的访问链接（或者带签名的临时链接）
- 5. 修改 HTML 代码里的音频地址为 R2 的链接
- 6. 把 HTML 文件本身部署到 Cloudflare Pages（或者随便哪个静态托管）
这次再打开网页，进度条随意拖动，歌词瞬间跳转，丝滑无比。
六、最终成果和给你的建议
现在，任何人只要点开你分享的网址，就能看到：
- • 专辑图片居中显示
- • 歌曲自动播放（或点击播放）
- • 歌词随进度滚动，当前句高亮
- • 可以自由拖拽进度
整个流程，你只准备了 3 个素材，其余全部由 AI 写代码完成。
七、最后说两句
这次经历让我明白，AI 是很好的执行者，但不一定是好的架构师。
大方向必须由你来定——你先去搜索“别人怎么做的”，确认方案成熟，再让 AI 帮你写具体代码。
另外，免费的 AI 模型虽然省钱，但耗时间，如果时间宝贵，可以考虑付费模型（它们往往更聪明），但无论如何，人工调研这一步省不得。
现在，你也去试试吧！准备好素材，让 AI 帮你做一个属于你自己的音乐视频页面，然后部署到网上，分享给朋友——他们肯定会觉得你很厉害 😄
本文由 kuzhang 整理