十分钟导入音轨，用 Remotion 音乐可视化模板导出 1080×1080 频谱视频
【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion
把一段 MP3 丢进 Remotion 的 template-music-visualization 模板，就能导出一段 1080×1080、30fps 的方形视频：频谱柱或示波器波形随节拍起伏，底部是封面、歌名和艺术家信息。单曲预告、播客动态封面、社交平台方形短视频，都适合用这条流水线产出，全程不用碰剪辑软件。
成品长这样
成品是纯黑底的正方形画面。视觉主体在上方，按参数二选一：spectrum画频谱柱，oscilloscope画示波器波形；鼓点强的歌会额外叠一层低音脉冲。底部卡片里放 280px 圆角封面图和两行文字。画面里的示例素材就是模板自带的，预览时直接可见：
如何本地跑通模板
先克隆仓库并进入模板目录，这是唯一需要多敲一步的地方，因为它嵌在 monorepo 里：
git clone https://gitcode.com/GitHub_Trending/re/remotion cd remotion/packages/template-music-visualization npm install装完依赖直接启动实时预览：
npx remotion studio浏览器打开本地端口后，拖动时间轴就能看到示例音轨与频谱的同步效果。模板自带的demo-track.mp3保证了每一步都有可验证的结果，替换素材前建议先完整过一遍预览流程。
如何替换自己的音轨与封面
把音轨和封面图放进public/目录，替换掉demo-track.mp3与demo-song-cover.jpeg即可，MP3、WAV 等常见格式都支持，音轨建议控制在 30–90 秒，渲染更快。
替换后有一处必须同步：Root.tsx 里audioFileUrl和coverImageUrl两个staticFile()引用仍指向旧文件名，只换文件不改引用会直接报错或加载旧素材。顺手把songName、artistName、textColor改成自己的信息。封面用 1:1 比例、不低于 1080×1080 的图最稳，组件内部按objectFit: cover裁切，非正方形图会被截边。
参数怎么调：Root.tsx 是控制中枢
所有可调项集中在 Root.tsx 的defaultProps中，取值受 schema.ts 的 zod 模式约束。改代码之外，Studio 侧边栏也能直接拨动参数实时对比。
| 参数 | 作用 | 建议值 |
|---|---|---|
type | 画面类型：spectrum频谱柱 /oscilloscope波形 | 按风格二选一 |
color | 主色调，同步作用于低音叠层 | #0b84f3、#ff3e00 |
linesToDisplay | 频谱柱数量 | 32–128，越大越细腻 |
numberOfSamples | 采样精度，仅接受"32"–"1024"枚举 | "256"/"512" |
mirrorWave | 频谱是否上下镜像 | 看整体构图 |
bassOverlay | 是否叠加低音脉冲层 | 鼓点强的歌开 |
audioOffsetInSeconds | 跳过片头的秒数，从第 10 秒截取就填 10 | 默认 0 |
切到oscilloscope类型后，表内参数换为windowInSeconds（波形窗口秒数，最小 0.1）和amplitude（振幅系数，最小 0.1）。
如何一键导出 1080×1080 方形成片
两点由模板自动处理，不用手动设置：
- 时长跟随音频：
calculateMetadata会读取音轨实际时长换算成帧数，换多长的歌都自动适配 - 输出行为：remotion.config.ts 已配置帧图格式为 jpeg、允许覆盖同名输出文件
满意后在 Studio 点 Render，或命令行直接导出：
npx remotion render避坑清单
- 文件名改了，
Root.tsx里的两处staticFile引用必须同步，这是最常踩的坑 numberOfSamples是字符串枚举不是数字，写512会被 schema 拒绝，要写"512"- 想截取副歌，用
audioOffsetInSeconds跳过片头，它同时会裁掉等长的尾部帧数，别把它当"只跳开头"用
还能延伸做什么
画面组装逻辑在 Main.tsx：BassOverlay画低音叠层，Spectrum.tsx 画频谱柱，Waveform画示波器，SongInfo渲染封面与歌名。想改绘制细节，进对应文件调整即可。不满足于现有画面时，仓库同级的animated-emoji（粒子与表情动效）、three（3D 场景）、transitions（镜头转场）、rounded-text-box（文字样式）等包都有现成组件可参考。更多渲染选项和 API 细节，看 packages/docs/ 的文档源码与 packages/core/ 核心实现。
【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
 复杂度风险、代码审查规则与流式处理实践)
