一次跑通Remotion音乐可视化视频：频谱与波形实战指南-开发者社区

一次跑通Remotion音乐可视化视频：频谱与波形实战指南

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

想把一段 30 秒的副歌配上跳动的频谱条发到短视频平台，用剪辑软件就得逐帧调动画。Remotion 的官方音乐可视化模板（template-music-visualization）就是为这类需求准备的：面向前端新手和普通开发者，它让你丢进音频文件、调几个参数，就能渲染出频谱随节拍跳动的 1080×1080 方形视频，全程不需要任何剪辑软件。

你将收获：

跑通模板的本地环境，在浏览器里实时预览频谱效果
调出想要的视觉风格：频谱条数、主色调、波形样式都可配置
渲染导出 MP4，直接适配短视频平台的方形规格
看懂 Remotion 的参数体系，复用到自己的视频项目里

能力全景：一个 React 写成的音乐可视化模板

Remotion 是一个用 React 组件写画面、逐帧渲染成真实视频文件的框架，这个模板则是把音频分析、频谱绘制、封面排版这些脏活全部封装好的开箱示例。模板位于packages/template-music-visualization/，关键文件只有五处：

src/Root.tsx：入口组件，存放默认参数，并根据音频时长自动计算视频长度
src/Visualizer/：可视化核心，含 Spectrum.tsx（频谱条）、Waveform.tsx（波形）、BassOverlay.tsx（低频光晕）
src/helpers/schema.ts：用 zod 定义所有参数的类型和默认值
public/：示例音频 demo-track.mp3 和封面图，就是你要替换的两个文件
remotion.config.ts：渲染相关配置

安装依赖并准备开始（全部是本地操作）：

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

核心操作：从替换素材到导出视频 🎬

接下来三件事做完，模板里的示例音频就换成了你自己的歌曲。

替换本地的音频与封面素材

视频画面完全由public/目录下的文件驱动，所以第一步是把素材放进来（这只是替换本地文件，不涉及对仓库的修改）。音频建议控制在 30-90 秒，效果和渲染时长比较平衡；封面用 1:1、至少 1080×1080 的图片，在各端显示都清晰。

🔧 提示：最简单的做法是直接覆盖原文件名，这样代码里不用改。如果换了文件名，记得把 Root.tsx 里两处staticFile()的路径同步改掉，否则会报文件找不到。

调出想要的视觉风格

所有视觉由 Root.tsx 中defaultProps的visualizer对象控制，模板内置两种风格：spectrum（频谱条）和oscilloscope（波形），只保留需要改的那几行：

defaultProps={{ // 素材与元信息 audioFileUrl: staticFile("demo-track.mp3"), coverImageUrl: staticFile("demo-song-cover.jpeg"), songName: "你的歌名", artistName: "你的艺人名", // 可视化设置 visualizer: { type: "spectrum", // 换成 "oscilloscope" 即波形 color: "#0b84f3", // 主色调 linesToDisplay: 65, // 频谱条数量 numberOfSamples: "512", // 采样精度 }, }}

参数	含义	推荐值
type	可视化类型	spectrum（频谱条）/ oscilloscope（波形）
color	主色调	#0b84f3（蓝）/ #ff3e00（橙）
linesToDisplay	频谱条数量	32-128，数值越大越细腻
numberOfSamples	频域采样精度	256 / 512 / 1024
bassOverlay	低频光晕	true，节奏感更强