视频制作中如何把音频谱 显示在播放的视频上

在AE中做，提取视频音频做素材，1、新建一合成。命名为频谱线。时间10秒，2、导入提取的音频，添加到时间线上。调整图片大小。3、新建固态层命名为频谱线。在效果中找到生成，选择音频频谱添加到该层。调整波形开始和结束位置，可直接在窗口中拖动。音频层选择音乐，设置波段为50，最大高度350，柔化100。色调差值350。频谱线完成。提示：具体数值可根据音乐设定，注意最大高度不能超出屏幕。4、打开频谱线三维属性，添加简单摄像机动画和文字，预览效果。5.生成带alpha通道的视频，频谱做好了。6.在视频编辑软件中导入视频（带音频的）到视频轨上，再将带alpha通道的频谱视频导入到视频编辑软件中的覆叠轨或其他轨道上，调整频谱位置。

1、首先新建一个HTML文档，如图所示。

2、然后在body标签里输入video标签。

3、接着在video标签内输入controls="controls"，如图所示。

4、然后在video标签里输入<source>，接着在<source>内输入src="medias/volcano.ogg"，如图所示。

5、然后在后面输入type="video/ogg"如图所示，然后在定义一个source标签。

6、在标签内输入src="medias/volcano.mp4" type="video/mp4"如图所示。

7、最后按f12预览就可以看到视频播放器了。

本文 Demo

绘制波形图前首先需要配置好 AVAudioSession ，同时需要建立一个数组去保存音量数据。

在开始录音后，利用我们刚刚配置的定时器不断获取 averagePower ，并保存到数组之中。

现在我们已经获取了我们需要的所有数据，可以开始绘制波形图了。这时候让我们转到 MCVolumeView.swift 文件中，在上一个步骤中，我们发送了一条叫做 updateMeters 的通知，目的就是为了通知 MCVolumeView 进行波形图的更新。

当 setNeedsDisplay 被调用之后，就会调用 drawRect 方法，在这里我们可以进行绘制波形图的 *** 作。

在很多时候，录音不单止是需要显示波形图，还需要我们展示目前录音的时间和进度，所以我们可以在波形图上添加录音的进度条，所以我们转向 MCProgressView.swift 文件进行 *** 作。

以上就是我在绘制录音波形图的一些心得和看法，在demo中我还为录音HUD加入了高斯模糊和阴影，让HUD在展示上更具质感，这些就略过不提了。虽然如此，但是这个录音HUD我觉得还是有一些缺陷的，一来是和VC的耦合比较高，二是绘制线状波形图的效果并不是太理性，希望各位如果有更好的方法可以与我交流。

想了解更多内容可以查看 我的博客

---