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

Posted 2023-05-07

【中文标题】如何从 HTML5 网络视频生成音频波形？

【英文标题】：How to generate an audio waveform from an HTML5 web video?

【发布时间】：2018-06-09 16:33:52

【问题描述】：

给定一个普通的网络视频，例如：

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

如何生成它的音频波形？

不播放视频可以生成波形吗？

---

注意事项：

我对实现这一目标的可用 API 感兴趣，而不是“如何将波形渲染到画布”指南。 请使用纯 javascript。没有图书馆。

【参考方案1】：

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

看到 FF、chrome 和 Safari 接受它并带有 mp4 和 mpeg4a 音频，我有点惊讶。

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

---

另见MDN article on Visualizations with Web Audio API

【讨论】：

除了扩展名之外，mp4 和 m4a 之间没有区别 - 它只是更容易辨别内容是关于什么的（并且浏览器不能单独依赖扩展名）。

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

@K3N 不，我的意思是音频流编码为 mpeg4a 的视频文件，而不是封装在 mp4 容器中的音频文件。

而AudioBuffer只给出原始的PCM数据，对于一个波形来说确实足够了，但是如果OP需要分析这些数据，那么使用OfflineContext是有意义的。

同意，即使只是一次性渲染视频的整个波形（ala Soundcloud），离线上下文也会提供适当的工具。 +1（我最初认为它是因为他想要一个用于视频文件音频的示波器可视化器，但我可能误解了）。

【参考方案2】：

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

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

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