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
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    MooTools TwitterGitter Plugin

    Everyone loves Twitter. Everyone loves MooTools. That's why everyone should love TwitterGitter, a MooTools plugin that retrieves a user's recent tweets and allows the user to format them however the user would like. TwitterGitter allows the user to choose the number of...

  • By
    External Site Link Favorite Icons Using MooTools and CSS

    I recently came upon an interesting jQuery article about how you can retrieve all external links within a page, build the address of the site's favorite icon, and place the favorite icon along side the link. I've chosen a different approach which...

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!