How to generate an audio waveform from an HTML5 web video?

Question

Given a plain web video, e.g.:

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

How could I generate its audio waveform?

Is it possible to generate the waveform without playing the video?

---

Notes:

• I'm interested in the available APIs to achieve this, not a "how to render a waveform to a canvas" guide.
• Plain JavaScript, please. No libraries.

Answer 1

You might try AudioContext.decodeAudioData, though I can't tell whether video medias are well supported or not, it will probably depends a lot on the codecs and the browsers.

I am a bit surprised to see that FF, chrome and Safari accept it with an mp4 with and mpeg4a audio inside.

If it works, then you can use an OfflineAudioContext to analyze your audio data as fast as possible and generate your waveform data.

---

See also MDN article on Visualizations with Web Audio API