闲话少说，先看效果。
Remotion 简介
Remotion是一个开源的React库，用于创建视频和动画。它允许开发者使用React组件来生成视频内容，从而利用React的声明式编程特性来构建复杂的视觉效果和动画。
它具有以下主要特点：
- 基于 React: 开发者可以使用熟悉的
React语法和组件来创建视频内容，简化了视频制作的流程。 - 参数化: 你可以为视频添加参数，使其更加个性化和动态。
- 可编程性: 因为是基于
JavaScript，开发者可以使用编程逻辑来控制视频的内容和时间线。 - 导出视频:
Remotion可以将创建的内容导出为视频文件，支持多种格式。 - 实时预览: 可以在开发过程中实时预览视频效果，加快迭代速度。
它的使用场景：
- 动态内容生成: 适合用于创建基于数据的动态视频，例如数据可视化。
- 个性化视频: 可以根据用户数据生成个性化的视频内容，例如B站的用户年度总结视频。
MusicVideo Template 简介
MusicVideo Template 是一个Remotion模板， 旨在帮助用户创建音乐视频。
它基于Audiogram Template上修改而来。
Audiogram Template 是一个Remotion模板， 旨在帮助用户创建音频剪辑的视频，通常用于将播客片段分享在社交媒体上。
如何使用music-video-template生成自定义音乐视频
前期准备
- 歌曲音频文件
- 歌曲封面
- 歌词文件（可以使用
tools/MusicLyricApp获取lrc文件，该软件为一个开源项目，感兴趣的可以点个Star，项目链接，获取成功后需自行转换为srt格式）
准备好后放入public目录中供项目使用。
修改视频配置
// src/utils/getVideoSettings.ts
{
// Title settings
audioFileName: staticFile("audio.mp3"),
coverFileName: staticFile("cover.jpg"),
// Subtitles settings
subtitlesFileName: staticFile("lyric.srt"),
onlyDisplayCurrentSentence: true,
subtitlesTextColor: "rgba(255, 255, 255, 0.93)",
subtitlesLinePerPage: 2, // 根据单行或双行歌词进行修改
subtitlesZoomMeasurerSize: 2,
subtitlesLineHeight: 72, // 根据单行或双行歌词进行修改
// Wave settings
waveColor: ["#9E9E9E", "red"], // 音频可视化颜色
waveFreqRangeStartIndex: 7,
waveLinesToDisplay: 100, // 柱的数量
waveNumberOfSamples: "256", // 抽样频率
mirrorWave: false, // 是否镜像
durationInSeconds: 220, // 改为歌曲长度
}
导出视频
有两种方法可以导出视频：
- 执行
npm run start启动Studio，然后点击File > Render菜单项创建一项渲染任务 - 执行
npm run build命令渲染视频
可以在out目录中找到导出的视频。
总结
本文介绍了基于Remotion的音乐视频生成模板及关键功能的原理，虽然只实现了一些简单的功能，但是也展示了Remotion通过对视频进行可编程化进而动态生成视频的强大能力，感兴趣的朋友可以使用此模板尝试生成自己的音乐视频。
