用 Remotion 音乐可视化模板生成 1080×1080 频谱视频

用 Remotion 音乐可视化模板生成 1080×1080 频谱视频

【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion

Remotion 是一个用 React 写代码来产出视频的框架，它的 template-music-visualization 模板已经把音频频谱分析、画面合成和渲染流程全部搭好：导入一段音频，就能得到一段 1080×1080、30fps、画面随节拍律动的视频，底部自动展示封面图、歌名和艺术家。单曲预告、播客动态封面、社交平台的竖版/方形短视频，都可以直接基于它产出。

模板长什么样：目录结构与本地跑通

📦 模板的关键位置只有三处：

• 素材：public/下的 demo-track.mp3（示例音频）和 demo-song-cover.jpeg（示例封面）
• 主配置：src/Root.tsx，注册Visualizer合成，声明画布尺寸、帧率和所有可调参数
• 画面组件：src/Visualizer/Main.tsx，把频谱、音频、封面信息组装成完整画面

先克隆整个仓库并安装依赖，这个模板位于packages/template-music-visualization目录：

git clone https://gitcode.com/GitHub_Trending/re/remotion cd remotion/packages/template-music-visualization npm install

之后就可以直接进入换素材和调参数的环节，模板自带的示例音轨会保证每一步都有可预览的结果。

如何替换本地音频与封面

把你的音轨和封面图放进public/目录，替换掉demo-track.mp3与demo-song-cover.jpeg。MP3、WAV 等常见格式都支持；为了渲染效率，建议音轨控制在 30–90 秒。

两个注意点：

• 文件名如果改了，必须同步修改 src/Root.tsx 里的audioFileUrl和coverImageUrl，它们目前分别指向staticFile("demo-track.mp3")和staticFile("demo-song-cover.jpeg")
• 封面建议用 1:1 比例、至少 1080×1080 像素的图，在方形画布里显示才够清晰；同时顺手把songName与artistName改成你的信息

参数怎么调：视觉效果的配置项

🎨 所有可调参数集中在 src/Root.tsx 的defaultProps中，这是唯一的"控制中枢"：

defaultProps={{ // 音频设置 audioOffsetInSeconds: 0, audioFileUrl: staticFile("demo-track.mp3"), // 歌曲信息 coverImageUrl: staticFile("demo-song-cover.jpeg"), songName: "Sunset Render Deja Vu", artistName: "Remotion", textColor: "white", // 可视化设置 visualizer: { type: "spectrum" as const, bassOverlay: true, color: "#0b84f3", linesToDisplay: 65, mirrorWave: false, numberOfSamples: "512" as const, }, }}

参数取值有 zod 模式约束（见 src/helpers/schema.ts），常用项如下：

换成oscilloscope类型时，另有windowInSeconds（波形窗口秒数）和amplitude（振幅系数）两个参数。除了改代码，这些参数也能在 Studio 的侧边栏里直接拨动并实时对比。

预览与渲染：导出 1080×1080 成片

启动实时预览：

npx remotion studio

打开 http://localhost:3000 后，拖动时间轴即可看到频谱与音频的同步效果。

渲染前有两点由模板自动处理，无需手动设置：

• 视频时长跟着音频走：src/Root.tsx 里的calculateMetadata会读取音频实际时长并换算成帧数，换多长的音乐都自动适配
• audioOffsetInSeconds用来跳过片头，比如从第 10 秒开始截取，就填10

确认满意后，在 Studio 里点 "Render" 按钮，或直接在命令行渲染：

npx remotion render

输出行为由 remotion.config.ts 决定：帧图格式为 jpeg、允许覆盖同名输出文件。

想再扩展一点：底层组件与相关包

🚀 src/Visualizer/Main.tsx 负责把各部分组装起来：BassOverlay渲染低音叠层，Spectrum画频谱柱，Waveform画示波器波形，SongInfo展示封面与歌名。想改绘制细节，就进入对应的.tsx文件调整。

不满足现有画面时，仓库里还有现成的组件可以参考或引入：

• 粒子、表情动效：packages/animated-emoji/
• 3D 频谱场景：packages/three/
• 镜头转场：packages/transitions/
• 文字展示样式：packages/rounded-text-box/

典型用途

• 单曲宣传：把 30 秒副歌配上频谱，直接发出去
• 播客与音频内容：给纯音频加一帧会动的视觉封面
• 社交媒体：1080×1080 的方形画布适配 Instagram、TikTok 等平台
• 演出与直播：作为舞台背景循环素材

更多渲染选项与 API 细节可看 packages/docs/ 和 packages/core/ 的源码。

【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion