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

时间:2017-12-29 07:34:34

标签: javascript html5 html5-video webrtc html5-audio

给定一个简单的网络视频,例如:

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

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

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

备注:

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

2 个答案:

答案 0 :(得分:2)

您可以尝试AudioContext.decodeAudioData,虽然我无法判断视频媒体是否受到良好支持,但它可能在很大程度上取决于编解码器和浏览器。

我有点惊讶地发现FF,Chrome和Safari接受了mp4和mpeg4a音频。

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

另见MDN article on Visualizations with Web Audio API

答案 1 :(得分:0)

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