admin管理员组

文章数量:1406338

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.

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.
  • javascript
  • html
  • html5-video
  • webrtc
  • html5-audio
Share Improve this question edited Dec 29, 2017 at 8:13 Misha Moroshko asked Dec 29, 2017 at 7:34 Misha MoroshkoMisha Moroshko 172k230 gold badges520 silver badges760 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

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

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/wiki/Waveform

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

本文标签： javascriptHow to generate an audio waveform from an HTML5 web videoStack Overflow

版权声明：本文标题：javascript - How to generate an audio waveform from an HTML5 web video? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745004130a2637155.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。