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
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    MooTools CountDown Plugin

    There are numerous websites around the internet, RapidShare for example, that make you wait an allotted amount of time before presenting you with your reward. Using MooTools, I've created a CountDown plugin that allows you to easily implement a similar system. The MooTools JavaScript The CountDown class...

  • By
    Send Email Notifications for Broken Images Using jQuery AJAX

    It's usually best to repair broken image paths as soon as possible because they can damage a website's credibility. And even worse is having a user tell you about it. Using jQuery and PHP, you can have your page automatically notify you of broken...

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!