用 Remotion 音乐可视化模板生成 1080×1080 频谱视频【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotionRemotion 是一个用 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常用项如下参数作用建议取值type画面类型spectrum频谱柱 /oscilloscope波形按风格二选一color主色调同时作用于低音叠层#0b84f3蓝、#ff3e00橙linesToDisplay频谱柱数量32–128越大越细腻numberOfSamples采样精度只接受32–1024的枚举值256/512mirrorWave频谱是否上下镜像看整体构图bassOverlay是否叠加低音脉冲层鼓点强的歌开换成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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考