展开本页目录
开始前准备什么
- Node.js 22以上、FFmpeg和可运行Chrome/Chromium；示例锁定HyperFrames 0.8.159。
- 先下载独立工程及输入，保留原文件，在副本中修改。
- 示例工程由本站编写，并用HyperFrames 0.8.159实际本地渲染。未调用Claude Code或远端文本/视频模型；读者可用随包提示词在自己的代理会话重做。本例六张输入为原创插画；已知120 BPM并人工选切点。
- 试听原创节拍并查看六张图
- 把节拍图与镜头切点分开
- 让音乐成为独立根音轨
- 把六个画面按已知切点排列
- 在Studio逐点复听
- 导出带音乐的20秒视频
- 听一次故意偏移的负例
- 替换歌曲时重新分析而不是套BPM
原创输入、八步教程、可编辑HyperFrames工程、实际MP4和核验记录。
明确本地实跑范围、图像/声音身份、命令和许可。
1280×720，20秒，24fps。
与正文图中事实、画面或时间点一一对应。
1. 试听原创节拍并查看六张图
project/assets/beat.wav是20秒原创数学合成音乐，city-1到city-6.svg是六张原创城市插画。它们不是实拍照片；替换成自己授权的照片也走相同切图步骤。
2. 把节拍图与镜头切点分开
beat-map.json记录120 BPM、每拍0.5秒，切图点为0、3、6、9、12、16秒。每拍不必切一次图；先把内容分成六段，再让关键切点落到可听到的拍点。
3. 让音乐成为独立根音轨
检查beat-track直接在composition root，起始0秒、时长20秒。不要放进一个只有3秒的图片场景，否则场景结束后可能被截断。音量在源素材中已控制，不在每个镜头重新播放歌曲。
4. 把六个画面按已知切点排列
依照切点为scene设置data-start/data-duration，最后一幕持续4秒。保留图像比例，避免把SVG插画误标成实拍；用自己的照片时也要检查人物和裁切。
5. 在Studio逐点复听
运行检查后，先看1、7、17秒的构图，再围绕每个切换点前后试听。本例节拍已知且人工选点，没有把预填BPM说成对任意歌曲的自动识别。
bash
npx [email protected] check --json
npx [email protected] preview --background --no-open
6. 导出带音乐的20秒视频
导出后核对1280×720、24fps、20秒和实际音轨。先播放output.mp4，再看beat-map.json，确认图片不是只在无声预览里切换。
bash
npx [email protected] render --output ../my-output.mp4 --fps 24 --quality high --workers 2 --strict7. 听一次故意偏移的负例
offset-negative.mp4将音轨整体推迟180毫秒，画面先切而鼓点后到。与正常版本交替播放，确认自己听得出错位；负例不是另一次模型生成，也不是“AI卡点保证准确”的证据。
8. 替换歌曲时重新分析而不是套BPM
复制工程后换成自己授权的曲子，重新分析和复听节拍；真实音乐可能变速或有弱起，不能直接套用120 BPM。原始WAV、切点与实际成片都应保留，便于复查。
bash
python3 verify.py怎样确认已经完成
- 原始输入、事实表和成片中的文字/画面一致。
- Studio逐点预览后，核对实际MP4画幅、时长、fps及音轨。
- 练习包verify.py回读本题真实导出，不把它当作代理或外部模型可靠性证明。
常见问题
一段音乐自动做卡点视频？
project/assets/beat.wav是20秒原创数学合成音乐，city-1到city-6.svg是六张原创城市插画。它们不是实拍照片；替换成自己授权的照片也走相同切图步骤。 检查beat-track直接在composition root，起始0秒、时长20秒。不要放进一个只有3秒的图片场景，否则场景结束后可能被截断。音量在源素材中已控制，不在每个镜头重新播放歌曲。
AI照片卡点短片？
运行检查后，先看1、7、17秒的构图，再围绕每个切换点前后试听。本例节拍已知且人工选点，没有把预填BPM说成对任意歌曲的自动识别。
HyperFrames 音乐卡点需要付费API吗？
本例HTML到MP4在本地执行，不需要为HyperFrames本地渲染购买模型额度。自己的编码代理、可选配音/图像模型或云渲染可能另行收费；本页不把这些费用混成统一免费。