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

提供普通网络视频，例如：

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

如何生成其音频波形

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

---

注意事项：

• 我感兴趣的是实现这一点的可用API，而不是“如何将波形呈现到画布”指南
• 请给我纯JavaScript。没有图书馆

您可以尝试，尽管我无法判断视频媒体是否得到了很好的支持，但这可能在很大程度上取决于编解码器和浏览器

我有点惊讶地看到FF、chrome和Safari接受了内置mp4和mpeg4a音频的版本

如果它能工作，那么你就可以使用一个新的工具来尽可能快地分析你的音频数据并生成你的波形数据

---

---

另请参见

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

例如：

---

ffmpeg-ic:\test.mp3-filter_complex“showwavespic=s=640x120”-frames:v1 C:\waveform.png

除了扩展之外，mp4和m4a之间没有任何区别-它只是让您更容易识别内容（浏览器不能仅依赖扩展）。顺便说一句，不需要离线上下文，因为解码的音频数据将传递可用于波形绘制的解码样本缓冲区。@K3N不，我指的是音频流编码为mpeg4a的视频文件，而不是封装在mp4容器中的音频文件。音频缓冲区仅提供原始PCM数据，确实足以生成波形，但是如果OP需要分析这些数据，那么使用离线上下文是有意义的。同意，即使只是一次性渲染整个视频波形（ala Soundcloud），离线上下文也会提供适当的工具+1（我最初认为他想要一个视频文件音频的示波器，但我可能误解了）。