Waveform creation

You can create a waveform from every uploaded audio or video (which includes an audio channel) file. Simply use the waveform flag (fl_waveform in URLs) and set the file’s extension to any image format you like.

For example, let’s get the waveform of this dog video -

Ruby:
Copy to clipboard
cl_video_tag("dog")
PHP:
Copy to clipboard
cl_video_tag("dog")
Python:
Copy to clipboard
CloudinaryVideo("dog").video()
Node.js:
Copy to clipboard
cloudinary.video("dog")
Java:
Copy to clipboard
cloudinary.url().videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog")
React:
Copy to clipboard
<Video publicId="dog" >

</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >

</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >

</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("dog.mp4")

Let’s also resize it to a width of 350 and height of 250, and set the image to jpg -

Ruby:
Copy to clipboard
cl_image_tag("dog.jpg", :flags=>"waveform", :width=>350, :height=>250, :resource_type=>"video")
PHP:
Copy to clipboard
cl_image_tag("dog.jpg", array("flags"=>"waveform", "width"=>350, "height"=>250, "resource_type"=>"video"))
Python:
Copy to clipboard
CloudinaryVideo("dog.jpg").image(flags="waveform", width=350, height=250)
Node.js:
Copy to clipboard
cloudinary.image("dog.jpg", {flags: "waveform", width: 350, height: 250, resource_type: "video"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().flags("waveform").width(350).height(250)).resourceType("video").imageTag("dog.jpg");
JS:
Copy to clipboard
cloudinary.videoTag('dog.jpg', {flags: "waveform", width: 350, height: 250}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("dog.jpg", {flags: "waveform", width: 350, height: 250, resource_type: "video"})
React:
Copy to clipboard
<Video publicId="dog.jpg" resourceType="video">
  <Transformation flags="waveform" width="350" height="250" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog.jpg" resourceType="video">
  <cld-transformation flags="waveform" width="350" height="250" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog.jpg" resource-type="video">
  <cl-transformation flags="waveform" width="350" height="250">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Flags("waveform").Width(350).Height(250)).BuildImageTag("dog.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().flags("waveform").width(350).height(250)).resourceType("video").generate("dog.jpg");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setFlags("waveform").setWidth(350).setHeight(250)).generate("dog.jpg")

More info and transformations options on our waveform blogpost.

by Maor Gariv