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!
![How to Create a Twitter Card]()
One of my favorite social APIs was the Open Graph API adopted by Facebook. Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...
![fetch API]()
One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for. We've done well to create elegant APIs around XHR but we know we can do better. Our effort to...
![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...
![Dynamic Waveform Visualizations with wavesurfer.js]()
Waveform images are an awesome addition to boring audio widgets. They can be functional as well as aesthetically pleasing, allowing users to navigate audio visually. I recently found wavesurfer.js, an amazing waveform image utility that uses to Web Audio API to create super customizable...
How do you get a transparent background?
Is it possible to build waveform image using
offlineAudioContext? Seems like the exact tool for the job.