Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.
like image 355
Misha Moroshko Avatar asked Sep 01 '25 22:09

Misha Moroshko


1 Answers

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

like image 132
Kaiido Avatar answered Sep 03 '25 11:09

Kaiido