Create a Waveform Image with ffmpeg

By  on  

Waveform images have a variety of uses and I've started seeing waveform images overlaying at the bottom of videos.  That type of feature seems useful if you want to see identify music in a video or specific spaces in a video which feature action.  If you're creating an audio-centric app, you may have a dozen uses for the waveform image.

You can easily create a waveform image using the amazing ffmpeg utility with a very short command:

ffmpeg -i input -filter_complex "showwavespic=s=640x120" -frames:v 1 output.png

The image you'll get back will look similar to:

There are a variety of customizations you can create for waveform image as detailed in the ffmpeg waveform documentation.  Take some time to experiment with all of the features provided by ffmpeg -- you can do amazing things with media!

Recent Features

Incredible Demos

Discussion

  1. Martijn Frazer

    How do you get a transparent background?

  2. Juribiyan

    Is it possible to build waveform image using offlineAudioContext? Seems like the exact tool for the job.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!