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

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

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!