如何从HTML5网络视频生成音频波形？

Posted 2023-01-14

给定一个简单的网络视频，例如：

<video src="my-video.mp4"></video>

我怎样才能生成音频波形？

是否可以在不播放视频的情况下生成波形？

---

笔记：

• 我对可用的API感兴趣，而不是“如何将波形渲染到画布”指南。
• 请简单的javascript。没有图书馆。

答案

你可以试试AudioContext.decodeAudioData，虽然我不知道视频媒体是否得到很好的支持，但它可能在很大程度上取决于编解码器和浏览器。

我有点惊讶地看到FF，Chrome和Safari接受了mp4和mpeg4a音频。

如果它有效，那么您可以使用OfflineAudioContext尽快分析音频数据并生成波形数据。

---

另见MDN article on Visualizations with Web Audio API

另一答案

如果您将使用Web音频API，则将在客户端进行渲染。您无法控制体验质量，因为渲染可能会导致客户端出现内存和时间问题。您可以使用后端的FFmpeg生成波形图像并将其传递到前端。这很简单。

https://trac.ffmpeg.org/wiki/Waveform

示例：ffmpeg -i C：\ test.mp3 -filter_complex“showwavespic = s = 640x120”-frames：v 1 C：\ waveform.png