Create a Waveform Image with ffmpeg
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!
![Being a Dev Dad]()
I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...
![Create a CSS Flipping Animation]()
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...
![Create a 3D Panorama Image with A-Frame]()
In the five years I've been at Mozilla I've seen some awesome projects. Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and A-Frame project have.
A-Frame is a community project...
![Save Web Form Content Using Control + S]()
We've all used word processing applications like Microsoft Word and if there's one thing they've taught you it's that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it...
How do you get a transparent background?
Is it possible to build waveform image using
offlineAudioContext? Seems like the exact tool for the job.