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
    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...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript

    I'm what you would consider a bit of a GitHub fanboy. We all know that GitHub is the perfect place to store repositories of open source code, but I think my love of GitHub goes beyond that. GitHub seems to understand that most...

  • By
    CSS content and attr

    CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily.  There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar is generated content.  You saw a...

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!