{"id":21315,"date":"2020-05-10T10:35:00","date_gmt":"2020-05-10T10:35:00","guid":{"rendered":"http:\/\/how_to_generate_waveform_images_from_audio_files"},"modified":"2025-11-06T16:47:59","modified_gmt":"2025-11-07T00:47:59","slug":"how_to_generate_waveform_images_from_audio_files","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_to_generate_waveform_images_from_audio_files","title":{"rendered":"Waveform Image Generator | How to Convert Audio to Waveform Image"},"content":{"rendered":"

Nowadays, users can and often upload various media files to social networks, websites, and messaging apps. Most of those media are images and videos<\/a>, with a significant number being audio files. Subsequently, to create a thumbnail to depict an image, a site or app would crop and then resize it to scale. To depict a video, they would convert, crop, and resize a single frame from it as a thumbnail.<\/p>\n

But how do you portray audio? An ideal way is with a waveform<\/a> image, aka soundwave image, which, as a visual representation of audio, is displayed as a graph of the sound amplitude against time.<\/p>\n

This is part of a series of articles about video optimization<\/a>.<\/p>\n

Creating Waveform Images With the Cloudinary Waveform Image Generator<\/h2>\n

Cloudinary\u2019s media management capabilities enable you to upload, transform, and manage media, including images, videos, and audio. You can create waveform thumbnails, on the fly, for audio just as easily as you can for images and videos, and then fine-tune the thumbnails to match the graphic design and responsive layouts of all devices and browsers. You do all that through Cloudinary\u2019s dynamic URLs with no need for other software. In fact, Cloudinary is a superb waveform generator.<\/p>\n

Creating a waveform image for an audio file you\u2019ve uploaded to your Cloudinary account<\/a> takes only two steps:<\/p>\n

    \n
  1. Change the file extension (format) of the audio\u2019s delivery URL on Cloudinary to an image-centric format, such as PNG.<\/li>\n
  2. Enable the waveform<\/code> flag by adding fl_waveform<\/code> to the URL.<\/li>\n<\/ol>\n

    By default, Cloudinary delivers the generated waveform image with a high resolution, saving you the manual step of scaling it down.<\/p>\n

    Below is an example of a PNG waveform image of an audio file called bumblebee.mp3<\/code>, which has been uploaded<\/a> to Cloudinary\u2019s demo account, scaled to a height of 200 pixels and a width of 500 pixels:<\/p>\n

    \n Loading code examples<\/span>\n <\/cld-code-widget>\"Image<\/a><\/p>\n

    You can also extract and transform audio to waveform image from a video\u2019s audio track in the same way: simply change the file extension of the video\u2019s Cloudinary URL to an image format like PNG and then add fl_waveform<\/code> to the URL.<\/p>\n

    Customizing Waveform Images<\/h2>\n

    You can tailor the characteristics of generated waveform images, too:<\/p>\n