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 -
PHP v2:
(new VideoTag (' dog.mp4 ' ));
Python:
CloudinaryVideo(" dog " ).video()
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
-
Ruby:
cl_image_tag(" dog.jpg " , :flags =>" waveform " , :width =>350 , :height =>250 , :resource_type =>" video " )
PHP v1:
cl_image_tag(" dog.jpg " , array (" flags " =>" waveform " , " width " =>350 , " height " =>250 , " resource_type " =>" video " ))
PHP v2:
(new ImageTag (' dog.jpg ' ))
->resize(Resize ::scale()->width(350 )->height(250 ))
->addFlag(Flag ::waveform())
->assetType(AssetType ::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 .