← View popular recipes

Find recipes by tags:

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 -

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/dog.mp4

Ruby:

cl_video_tag("dog")

PHP:

cl_video_tag("dog")

Python:

CloudinaryVideo("dog").video()

Node.js:

cloudinary.video("dog")

Java:

cloudinary.url().videoTag("dog");

JS:

cloudinary.videoTag('dog').toHtml();

jQuery:

$.cloudinary.video("dog")

React:

<Video publicId="dog" >

</Video>

Vue.js:

<cld-video publicId="dog" >

</cld-video>

Angular:

<cl-video public-id="dog" >

</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.BuildVideoTag("dog")

Android:

MediaManager.get().url().resourceType("video").generate("dog.mp4");

iOS:

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 -

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/fl_waveform,w_350,h_250/dog.jpg

Ruby:

cl_image_tag("dog.jpg", :flags=>"waveform", :width=>350, :height=>250, :resource_type=>"video")

PHP:

cl_image_tag("dog.jpg", array("flags"=>"waveform", "width"=>350, "height"=>250, "resource_type"=>"video"))

Python:

CloudinaryVideo("dog.jpg").image(flags="waveform", width=350, height=250)

Node.js:

cloudinary.image("dog.jpg", {flags: "waveform", width: 350, height: 250, resource_type: "video"})

Java:

cloudinary.url().transformation(new Transformation().flags("waveform").width(350).height(250)).resourceType("video").imageTag("dog.jpg");

JS:

cloudinary.videoTag('dog.jpg', {flags: "waveform", width: 350, height: 250}).toHtml();

jQuery:

$.cloudinary.image("dog.jpg", {flags: "waveform", width: 350, height: 250, resource_type: "video"})

React:

<Video publicId="dog.jpg" resourceType="video">
  <Transformation flags="waveform" width="350" height="250" />
</Video>

Vue.js:

<cld-video publicId="dog.jpg" resourceType="video">
  <cld-transformation flags="waveform" width="350" height="250" />
</cld-video>

Angular:

<cl-video public-id="dog.jpg" resource-type="video">
  <cl-transformation flags="waveform" width="350" height="250">
  </cl-transformation>
</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().Flags("waveform").Width(350).Height(250)).BuildImageTag("dog.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().flags("waveform").width(350).height(250)).resourceType("video").generate("dog.jpg");

iOS:

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 Jul 02, 2020

Tags: