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

Question

假设有一个普通的网页视频，例如：

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

如何生成音频波形图？

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

---

注：

• 我对可用的API感兴趣，以实现此目的，而不是“如何将波形渲染到画布”的指南。
• 请使用纯JavaScript，不要使用库。

- Misha Moroshko

Answer 1

你可以尝试使用AudioContext.decodeAudioData，但我无法确定视频媒体是否得到了良好的支持，这可能很大程度上取决于编解码器和浏览器。

我有点惊讶地看到FF、Chrome和Safari接受带有mpeg4a音频的mp4文件。

如果它起作用，那么你可以使用OfflineAudioContext尽可能快地分析你的音频数据并生成波形数据。

---

另请参阅使用Web Audio API进行可视化的MDN文章

- Kaiido

---

mp4和m4a之间除了扩展名外没有区别 - 扩展名只是使内容更易于辨认（浏览器不能仅依赖扩展名）。 - user1693593

无需离线上下文，因为decodeAudioData将处理已解码的样本缓冲区，可用于波形绘制。顺便说一句。 - user1693593

而且AudioBuffer只提供原始的PCM数据，对于波形来说足够了，但如果OP需要分析这些数据，则使用OfflineContext是有意义的。 - Kaiido

同意，即使只是一次性呈现整个视频波形（类似于Soundcloud），离线环境也会提供适当的工具。+1（我最初认为他想要一个范围可视化器来处理视频文件的音频，但我可能误解了）。 - user1693593

@Kaiido @K3N，你们能否创建一个最小运行示例来演示使用OfflineAudioContext的想法？ - Misha Moroshko

Answer 2

如果您使用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

- Salma Tofaily