在浏览器中制作音乐视频

此页面和关联的代码依赖项旨在与其他开发人员共享一种方法，可以从由用户输入和音频文件驱动的动态生成的新画布中创建完整的WebM视频。如果这听起来很有趣，那就继续读下去。

我是杰森。我正在构建Vizibop，这是一项目前处于测试阶段的服务，允许音乐家和播客快速轻松地创建与音频文件同步的独特MP4视频。是的，这是一件很重要的事情。

在其核心，Vizibop利用HTML画布、HTML5音频、MediaRecorder和P5.js来生成仅包含前端代码的WebM文件。从那里，该WebM文件通过AWS弹性代码转换器发送，将WebM文件转换为MP4文件，然后可以在Instagram、TikTok和YouTube等网站上共享。以下是从Vizibop创建的基本视频：

P5.js是一个javascript库，可以相对直接地在画布上绘图。即使对于像我这样数学上有挑战的人，使用P5也可以更容易地实现粒子迁移和群集迁移。我正在使用P5的实例模式来保持东西的整洁。以下是P5动画的一个非常基本的脚手架：

浏览器中的音频有点像兔子洞，如果你开始构建点唱机和视频游戏，Howler和SoundJS会让你的生活变得轻松很多。为简单起见，让我们简单地创建一个隐藏的音频元素，并允许用户单击按钮开始播放歌曲。对于Vizibop，我们允许用户使用FILEReader和EcreateObjectURL上传自己的WAV或MP3格式的歌曲。

P5.ound模块使您的草图中的变量可以根据声音的音量和频率进行更改，这一点非常容易。开箱即用，你可以使用振幅控制和快速傅立叶变换来做一些相当令人惊叹的事情。我们的编码列车频道有一系列关于P5内部声音的视频，我鼓励你去看。

在本例中，我们希望执行一些节拍检测来更改画布的背景。节拍检测也变得有点棘手，这取决于歌曲和底层音频的质量。在Vizibop中，我们让用户定义要关闭哪些频段，以便真正实现更准确的节拍检测。

上面的动画非常基础。更好的体验允许用户旋转旋钮和刻度盘来定制他们的动画。在我们的例子中，我试图平衡足够的旋钮和刻度盘来创建广泛的视频，而不会让用户有太多的选择。当您将图像、排版、颜色、运动和数学结合在一起时，可能性真的是无限的。

我们现在有了录制完全在前端构建的音乐视频的关键组件。

现在，乐趣开始了，特别是在浏览器和电脑之间，MediaRecorder和CaptureStream是让我们可以从上面的组件创建WebM视频的魔力。在撰写本文档时，Safari仅在实验模式下支持MediaRecorder。Firefox不支持VP9或H264编解码器。Chrome是我们在这方面最好的朋友，在这个用例中表现明显好于我们。在Chrome和Firefox之间有70%的市场份额，我愿意推进这一方法，我打赌Safari最终会让MediaRecorder普遍可用。

我还在调整这里的配置。对于此应用，VP9和H264编解码器的性能似乎都低于VP8。火狐有它的问题。调整动画和CaptureStream的帧频，再加上MediaRecorder的可选VideoBitsPerSecond参数，似乎可以改善视觉滞后和由于压缩而产生的伪像。这并不完美，但到目前为止我对结果很满意。

使用这种技术，您可以在浏览器中创建的类型确实没有限制。尽管如此，按照设计，Vizibop不会演变为一个成熟的视频编辑器。指导原则是使用户体验保持简单，同时最大限度地增加可以创建的独特视频的数量。令人惊叹的因素=独特视频的数量/旋钮和拨盘的数量。我的目的是为那些我认为应该花更多时间专注于他们的核心工艺的人创造一个非常简单的工具。