CODEWITHSUNDEEP
javascripthtmlhtml5-videowebrtchtml5-audio
Misha Moroshko
Misha Moroshko

Reputation: 171321

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:

Upvotes: 4

Views: 6224

Answers (2)

Salma Tofaily
Salma Tofaily

Reputation: 153

If you will use web audio API, you will render on the client side. You will not control the quality of experience because rendering may cause memory and time issues for clients. you can generate an image of the waveform using FFmpeg on the backend and pass it to the front. It is pretty simple.

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

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

Upvotes: 0

Kaiido
Kaiido

Reputation: 136628

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

Upvotes: 4

Related Questions