You can stream audio from any audio or video file in your product environment, adjust audio settings, or generate audio waveform images from any audio or video file.
You can upload any audio file to your product environment, convert the audio file format, extract audio from videos and transform them on delivery. Audio files are uploaded to Cloudinary as a video
asset type. For details, see Uploading videos .
Video files can be converted to audio files by setting the file format (or extension) to one of the supported audio formats . For example, to convert the MP4 video file named dog
to an MP3 audio file:
Ruby (cloudinary 1.x):
cloudinary_url(" dog.mp3 " , :resource_type =>" video " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp3 ' ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
Cloudinary ::cloudinary_url(" dog.mp3 " , array (" resource_type " =>" video " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
cloudinary.utils.cloudinary_url(" dog.mp3 " , resource_type=" video " )
Node.js (cloudinary 1.x):
cloudinary.url(" dog.mp3 " , {resource_type : " video " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().resourceType(" video " ).generate(" dog.mp3 " )
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp3 " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.url(' dog.mp3 ' , {resource_type : ' video ' });
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.url(" dog.mp3 " , {resource_type : " video " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp3 " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
cloudinary.url(' dog.mp3 ' , {resource_type : ' video ' });
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryVideo(" dog.mp3 " );
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
cloudinary.url(' dog.mp3 ' , {resource_type : ' video ' });
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp3 " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
cloudinary.url(' dog.mp3 ' , {resource_type : ' video ' });
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.BuildUrl(" dog.mp3 " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).generate(" dog.mp3 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().resourceType(" video " ).generate(" dog.mp3 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp3 " )
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.video('dog.mp3').transformation(Transformation());
Dart (cloudinary_dart 0.x):
cloudinary.video('dog.mp3').transformation(Transformation());
Relevant video transformations apply for audio as well (e.g.,
bitrate and
trimming ), but dimensional or visual related transformations are ignored.
For example, you can trim an audio file to 3 seconds, starting from second 2.0, use the mp3 codec, and set a maximum bitrate of 44 kbps:
Ruby (cloudinary 1.x):
cloudinary_url(" docs/firefly-tune.mp3 " , :resource_type =>" video " , :transformation =>[
{:duration =>" 3.0 " , :start_offset =>" 2.0 " },
{:audio_codec =>" mp3 " , :bit_rate =>" 44k " }
])
PHP (cloudinary_php 2.x):
(new VideoTag (' docs/firefly-tune.mp3 ' ))
->videoEdit(VideoEdit ::trim ()->startOffset(2.0 )
->duration(3.0 ))
->transcode(Transcode ::audioCodec(
AudioCodec ::mp3()))
->transcode(Transcode ::bitRate(" 44k " ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
Cloudinary ::cloudinary_url(" docs/firefly-tune.mp3 " , array (" resource_type " =>" video " , " transformation " =>array (
array (" duration " =>" 3.0 " , " start_offset " =>" 2.0 " ),
array (" audio_codec " =>" mp3 " , " bit_rate " =>" 44k " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
cloudinary.utils.cloudinary_url(" docs/firefly-tune.mp3 " , resource_type=" video " , transformation=[
{' duration ' : " 3.0 " , ' start_offset ' : " 2.0 " },
{' audio_codec ' : " mp3 " , ' bit_rate ' : " 44k " }
])
Node.js (cloudinary 1.x):
cloudinary.url(" docs/firefly-tune.mp3 " , {resource_type : " video " , transformation : [
{duration : " 3.0 " , start_offset : " 2.0 " },
{audio_codec : " mp3 " , bit_rate : " 44k " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.duration(" 3.0 " ).startOffset(" 2.0 " ).chain()
.audioCodec(" mp3 " ).bitRate(" 44k " )).resourceType(" video " ).generate(" docs/firefly-tune.mp3 " )
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" docs/firefly-tune.mp3 " )
.videoEdit(trim().startOffset(" 2.0 " ).duration(" 3.0 " ))
.transcode(audioCodec(" mp3 " ))
.transcode(bitRate(" 44k " ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.url(' docs/firefly-tune.mp3 ' , {transformation : [
{duration : " 3.0 " , startOffset : " 2.0 " },
{audioCodec : " mp3 " , bitRate : " 44k " }
]}, {resource_type : ' video ' });
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.url(" docs/firefly-tune.mp3 " , {resource_type : " video " , transformation : [
{duration : " 3.0 " , start_offset : " 2.0 " },
{audio_codec : " mp3 " , bit_rate : " 44k " }
]})
React (@cloudinary/react 1.x):
new CloudinaryVideo(" docs/firefly-tune.mp3 " )
.videoEdit(trim().startOffset(" 2.0 " ).duration(" 3.0 " ))
.transcode(audioCodec(" mp3 " ))
.transcode(bitRate(" 44k " ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
cloudinary.url(' docs/firefly-tune.mp3 ' , {transformation : [
{duration : " 3.0 " , startOffset : " 2.0 " },
{audioCodec : " mp3 " , bitRate : " 44k " }
]}, {resource_type : ' video ' });
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryVideo(" docs/firefly-tune.mp3 " )
.videoEdit(trim().startOffset(" 2.0 " ).duration(" 3.0 " ))
.transcode(audioCodec(" mp3 " ))
.transcode(bitRate(" 44k " ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
cloudinary.url(' docs/firefly-tune.mp3 ' , {transformation : [
{duration : " 3.0 " , startOffset : " 2.0 " },
{audioCodec : " mp3 " , bitRate : " 44k " }
]}, {resource_type : ' video ' });
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" docs/firefly-tune.mp3 " )
.videoEdit(trim().startOffset(" 2.0 " ).duration(" 3.0 " ))
.transcode(audioCodec(" mp3 " ))
.transcode(bitRate(" 44k " ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
cloudinary.url(' docs/firefly-tune.mp3 ' , {transformation : [
{duration : " 3.0 " , startOffset : " 2.0 " },
{audioCodec : " mp3 " , bitRate : " 44k " }
]}, {resource_type : ' video ' });
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
.Duration(" 3.0 " ).StartOffset(" 2.0 " ).Chain()
.AudioCodec(" mp3 " ).BitRate(" 44k " )).BuildUrl(" docs/firefly-tune.mp3 " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation()
.setDuration(" 3.0 " ).setStartOffset(" 2.0 " ).chain()
.setAudioCodec(" mp3 " ).setBitRate(" 44k " )).generate(" docs/firefly-tune.mp3 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.duration(" 3.0 " ).startOffset(" 2.0 " ).chain()
.audioCodec(" mp3 " ).bitRate(" 44k " )).resourceType(" video " ).generate(" docs/firefly-tune.mp3 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" docs/firefly-tune.mp3 " )
videoEdit(VideoEdit.trim() { startOffset(2.0F )
duration(3.0F ) })
transcode(Transcode.audioCodec(
AudioCodec.mp3()))
transcode(Transcode.bitRate(" 44k " ))
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.video('docs/firefly-tune.mp3').transformation(Transformation()
.videoEdit(VideoEdit.trim().startOffset('2.0')
.duration('3.0'))
.transcode(Transcode.audioCodec(
AudioCodec.mp3()))
.transcode(Transcode.bitRate("44k")));
Dart (cloudinary_dart 0.x):
cloudinary.video('docs/firefly-tune.mp3').transformation(Transformation()
.videoEdit(VideoEdit.trim().startOffset('2.0')
.duration('3.0'))
.transcode(Transcode.audioCodec(
AudioCodec.mp3()))
.transcode(Transcode.bitRate("44k")));
The table below summarizes the supported audio formats.
Format
Extensions
Supported for Upload
Supported for Delivery
AAC (Advanced Audio Coding)
aac
Yes
Yes
AIFF (Audio Interchange File Format)
aiff
Yes
Yes
AMR (Adaptive Multi-Rate)
amr
Yes
FLAC (Free Lossless Audio Codec)
flac
Yes
M4A
m4a
Yes
Yes
MP3 (MPEG-3)
mp3
Yes
Yes
OGG
ogg
Yes
Yes
OPUS
opus
Yes
WAV (Waveform Audio File Format)
wav
Yes
Yes
See also : Supported video formats
Audio settings are used for adjusting the audio properties of an audio or video file. You can:
Use the audio_frequency
parameter (af
in URLs) to control the audio sampling frequency. This parameter represents an integer value in Hz, or, to retain the original frequency (af_iaf
in URLs) of a video when setting the video codec automatically . See af (audio_frequency) in the Transformation URL API Reference for the possible values.
For example, setting the audio frequency to 22050 Hz in the uploaded mp4 video named dog
:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :audio_frequency =>" 22050 " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->transcode(Transcode ::audioFrequency(22050 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" audio_frequency " =>" 22050 " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(audio_frequency=" 22050 " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {audio_frequency : " 22050 " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().audioFrequency(" 22050 " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {audioFrequency : " 22050 " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {audio_frequency : " 22050 " })
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation audioFrequency =" 22050 " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-video public -id=" dog " >
<cld-transformation audio-frequency =" 22050 " />
</ cld-video>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation audio-frequency=" 22050 " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AudioFrequency(" 22050 " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setAudioFrequency(" 22050 " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().audioFrequency(" 22050 " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
transcode(Transcode.audioFrequency(22050 ))
}.generate()
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
Use the audio_codec
parameter (ac
in URLs) to set the audio codec or remove the audio channel completely as follows:
none
removes the audio channel
aac
(mp4 only)
vorbis
(ogv or webm only)
mp3
(mp4 only)
opus
(webm only)
For example, removing the audio channel from the uploaded mp4 video named dog
:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :audio_codec =>" none " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->transcode(Transcode ::audioCodec(
AudioCodec ::none()));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" audio_codec " =>" none " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(audio_codec=" none " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {audio_codec : " none " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().audioCodec(" none " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).transcode(audioCodec(" none " ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {audioCodec : " none " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {audio_codec : " none " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).transcode(audioCodec(" none " ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation audioCodec =" none " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryVideo(" dog.mp4 " ).transcode(audioCodec(" none " ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-video public -id=" dog " >
<cld-transformation audio-codec =" none " />
</ cld-video>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).transcode(audioCodec(" none " ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation audio-codec=" none " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AudioCodec(" none " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setAudioCodec(" none " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().audioCodec(" none " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
transcode(Transcode.audioCodec(
AudioCodec.none()))
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.video('dog.mp4').transformation(Transformation()
.transcode(Transcode.audioCodec(
AudioCodec.none())));
Dart (cloudinary_dart 0.x):
cloudinary.video('dog.mp4').transformation(Transformation()
.transcode(Transcode.audioCodec(
AudioCodec.none())));
Control the audio volume of an audio or video file with the volume
effect parameter (e_volume
in URLs). You can adjust the volume as a percentage of the current volume, by specifying an increase or decrease in decibels, or just set the volume to mute
.
For example, increasing the volume in the mp4 video named dog
by 50%:
Ruby (cloudinary 1.x):
cl_video_tag(" dog " , :effect =>" volume:50 " )
PHP (cloudinary_php 2.x):
(new VideoTag (' dog.mp4 ' ))
->videoEdit(VideoEdit ::volume(50 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" dog " , array (" effect " =>" volume:50 " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog " ).video(effect=" volume:50 " )
Node.js (cloudinary 1.x):
cloudinary.video(" dog " , {effect : " volume:50 " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().effect(" volume:50 " )).videoTag(" dog " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" dog.mp4 " ).videoEdit(volume(50 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog ' , {effect : " volume:50 " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" dog " , {effect : " volume:50 " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" dog.mp4 " ).videoEdit(volume(50 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog " >
<Transformation effect =" volume:50 " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryVideo(" dog.mp4 " ).videoEdit(volume(50 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-video public -id=" dog " >
<cld-transformation effect =" volume:50 " />
</ cld-video>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" dog.mp4 " ).videoEdit(volume(50 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog " >
<cl-transformation effect=" volume:50 " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect(" volume:50 " )).BuildVideoTag(" dog " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation().setEffect(" volume:50 " )).generate(" dog.mp4 " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().effect(" volume:50 " )).resourceType(" video " ).generate(" dog.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" dog.mp4 " )
videoEdit(VideoEdit.volume(50 ))
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.video('dog.mp4').transformation(Transformation()
.videoEdit(VideoEdit.volume(50)));
Dart (cloudinary_dart 0.x):
cloudinary.video('dog.mp4').transformation(Transformation()
.videoEdit(VideoEdit.volume(50)));
For all volume
effect options, see the e_volume parameter in the Transformation URL API Reference .
You can create audio waveform images from audio or video files with fine control over the look & feel of the generated waveform image.
This section is divided into the following subsections:
To create a waveform image from an audio or video file uploaded to your Cloudinary product environment, change the file extension (format) of the Cloudinary delivery URL to any image format (e.g., PNG) and enable the waveform
flag (fl_waveform
in URLs). By default, the resulting waveform image is delivered with a very high resolution, so you will probably also want to scale down the resulting image.
For example, to generate a PNG waveform image from the audio track of the dog.mp4
video file uploaded to Cloudinary's demo product environment, scaled to a height of 200 pixels and a width of 500 pixels:
Ruby (cloudinary 1.x):
cl_image_tag(" dog.png " , :resource_type =>" video " , :transformation =>[
{:height =>200 , :width =>500 , :crop =>" scale " },
{:flags =>" waveform " }
])
PHP (cloudinary_php 2.x):
(new ImageTag (' dog.png ' ))
->resize(Resize ::scale()->width(500 )
->height(200 ))
->addFlag(
Flag ::waveform())
->assetType(" video " );
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" dog.png " , array (" resource_type " =>" video " , " transformation " =>array (
array (" height " =>200 , " width " =>500 , " crop " =>" scale " ),
array (" flags " =>" waveform " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog.png " ).image(transformation=[
{' height ' : 200 , ' width ' : 500 , ' crop ' : " scale " },
{' flags ' : " waveform " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" dog.png " , {resource_type : " video " , transformation : [
{height : 200 , width : 500 , crop : " scale " },
{flags : " waveform " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.height(200 ).width(500 ).crop(" scale " ).chain()
.flags(" waveform " )).resourceType(" video " ).imageTag(" dog.png " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog.png ' , {transformation : [
{height : 200 , width : 500 , crop : " scale " },
{flags : " waveform " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" dog.png " , {resource_type : " video " , transformation : [
{height : 200 , width : 500 , crop : " scale " },
{flags : " waveform " }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog.png " resourceType =" video " >
<Transformation height =" 200 " width =" 500 " crop =" scale " />
<Transformation flags =" waveform " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-video public -id=" dog.png " resource-type=" video " >
<cld-transformation height =" 200 " width =" 500 " crop =" scale " />
<cld-transformation flags =" waveform " />
</ cld-video>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog.png " resource-type=" video " >
<cl-transformation height=" 200 " width=" 500 " crop=" scale " >
</ cl-transformation>
<cl-transformation flags="waveform">
< / cl-transformation>
</ cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
.Height(200 ).Width(500 ).Crop(" scale " ).Chain()
.Flags(" waveform " )).BuildImageTag(" dog.png " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation()
.setHeight(200 ).setWidth(500 ).setCrop(" scale " ).chain()
.setFlags(" waveform " )).generate(" dog.png " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.height(200 ).width(500 ).crop(" scale " ).chain()
.flags(" waveform " )).resourceType(" video " ).generate(" dog.png " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" dog.png " )
resize(Resize.scale() { width(500 )
height(200 ) })
addFlag(
Flag.waveform())
assetType(" video " )
}.generate()
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
You can also control the colors used in the waveform image with the color
parameter (co
in URLs) to set the color for the waveform (default white
) and the background
parameter (b
in URLs) to set the background color of the image (default black
). You can create waveforms with a transparent background by setting the background
parameter to transparent
or none
(b_transparent
or b_none
in URLs).
For example, to generate the same PNG waveform image from the audio track of the dog.mp4
video file in the example above in inverted colors - with the waveform rendered in black on a white background:
Ruby (cloudinary 1.x):
cl_image_tag(" dog.png " , :resource_type =>" video " , :transformation =>[
{:height =>200 , :width =>500 , :crop =>" scale " },
{:background =>" white " , :color =>" black " , :flags =>" waveform " }
])
PHP (cloudinary_php 2.x):
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" dog.png " , array (" resource_type " =>" video " , " transformation " =>array (
array (" height " =>200 , " width " =>500 , " crop " =>" scale " ),
array (" background " =>" white " , " color " =>" black " , " flags " =>" waveform " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog.png " ).image(transformation=[
{' height ' : 200 , ' width ' : 500 , ' crop ' : " scale " },
{' background ' : " white " , ' color ' : " black " , ' flags ' : " waveform " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" dog.png " , {resource_type : " video " , transformation : [
{height : 200 , width : 500 , crop : " scale " },
{background : " white " , color : " black " , flags : " waveform " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.height(200 ).width(500 ).crop(" scale " ).chain()
.background(" white " ).color(" black " ).flags(" waveform " )).resourceType(" video " ).imageTag(" dog.png " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog.png ' , {transformation : [
{height : 200 , width : 500 , crop : " scale " },
{background : " white " , color : " black " , flags : " waveform " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" dog.png " , {resource_type : " video " , transformation : [
{height : 200 , width : 500 , crop : " scale " },
{background : " white " , color : " black " , flags : " waveform " }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog.png " resourceType =" video " >
<Transformation height =" 200 " width =" 500 " crop =" scale " />
<Transformation background =" white " color =" black " flags =" waveform " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-video public -id=" dog.png " resource-type=" video " >
<cld-transformation height =" 200 " width =" 500 " crop =" scale " />
<cld-transformation background =" white " color =" black " flags =" waveform " />
</ cld-video>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog.png " resource-type=" video " >
<cl-transformation height=" 200 " width=" 500 " crop=" scale " >
</ cl-transformation>
<cl-transformation background="white" color="black" flags="waveform">
< / cl-transformation>
</ cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
.Height(200 ).Width(500 ).Crop(" scale " ).Chain()
.Background(" white " ).Color(" black " ).Flags(" waveform " )).BuildImageTag(" dog.png " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation()
.setHeight(200 ).setWidth(500 ).setCrop(" scale " ).chain()
.setBackground(" white " ).setColor(" black " ).setFlags(" waveform " )).generate(" dog.png " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.height(200 ).width(500 ).crop(" scale " ).chain()
.background(" white " ).color(" black " ).flags(" waveform " )).resourceType(" video " ).generate(" dog.png " );
Kotlin (kotlin-url-gen 1.x):
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
If you want to capture the waveform of a specific segment of the audio file, you can select from the following parameters to specify the section of the file to sample for the waveform:
start_offset
(so
in URLs) specifies the start of the sample.
end_offset
(eo
in URLs) specifies the end of the sample.
duration
(du
in URLs) specifies the duration of the sample.
For example, to display a PNG waveform image of a sample from the 2 second mark until the 4 second mark of the dog.mp4
video file uploaded to Cloudinary's demo product environment, scaled to a height of 250 pixels and a width of 400 pixels, with the waveform rendered in blue on a transparent background:
Ruby (cloudinary 1.x):
cl_image_tag(" dog.png " , :resource_type =>" video " , :transformation =>[
{:end_offset =>" 4.0 " , :start_offset =>" 2.0 " },
{:height =>250 , :width =>400 , :crop =>" scale " },
{:flags =>" waveform " , :color =>" blue " , :background =>" transparent " }
])
PHP (cloudinary_php 2.x):
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" dog.png " , array (" resource_type " =>" video " , " transformation " =>array (
array (" end_offset " =>" 4.0 " , " start_offset " =>" 2.0 " ),
array (" height " =>250 , " width " =>400 , " crop " =>" scale " ),
array (" flags " =>" waveform " , " color " =>" blue " , " background " =>" transparent " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" dog.png " ).image(transformation=[
{' end_offset ' : " 4.0 " , ' start_offset ' : " 2.0 " },
{' height ' : 250 , ' width ' : 400 , ' crop ' : " scale " },
{' flags ' : " waveform " , ' color ' : " blue " , ' background ' : " transparent " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" dog.png " , {resource_type : " video " , transformation : [
{end_offset : " 4.0 " , start_offset : " 2.0 " },
{height : 250 , width : 400 , crop : " scale " },
{flags : " waveform " , color : " blue " , background : " transparent " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.endOffset(" 4.0 " ).startOffset(" 2.0 " ).chain()
.height(250 ).width(400 ).crop(" scale " ).chain()
.flags(" waveform " ).color(" blue " ).background(" transparent " )).resourceType(" video " ).imageTag(" dog.png " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' dog.png ' , {transformation : [
{endOffset : " 4.0 " , startOffset : " 2.0 " },
{height : 250 , width : 400 , crop : " scale " },
{flags : " waveform " , color : " blue " , background : " transparent " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" dog.png " , {resource_type : " video " , transformation : [
{end_offset : " 4.0 " , start_offset : " 2.0 " },
{height : 250 , width : 400 , crop : " scale " },
{flags : " waveform " , color : " blue " , background : " transparent " }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Video publicId =" dog.png " resourceType =" video " >
<Transformation endOffset =" 4.0 " startOffset =" 2.0 " />
<Transformation height =" 250 " width =" 400 " crop =" scale " />
<Transformation flags =" waveform " color =" blue " background =" transparent " />
</Video>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-video public -id=" dog.png " resource-type=" video " >
<cld-transformation end-offset =" 4.0 " start-offset =" 2.0 " />
<cld-transformation height =" 250 " width =" 400 " crop =" scale " />
<cld-transformation flags =" waveform " color =" blue " background =" transparent " />
</ cld-video>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" dog.png " resource-type=" video " >
<cl-transformation end-offset=" 4.0 " start-offset=" 2.0 " >
</ cl-transformation>
<cl-transformation height="250" width="400" crop="scale">
< / cl-transformation>
<cl-transformation flags=" waveform " color=" blue " background=" transparent " >
</ cl-transformation>
< / cl-video>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
.EndOffset(" 4.0 " ).StartOffset(" 2.0 " ).Chain()
.Height(250 ).Width(400 ).Crop(" scale " ).Chain()
.Flags(" waveform " ).Color(" blue " ).Background(" transparent " )).BuildImageTag(" dog.png " )
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" video " ).setTransformation(CLDTransformation()
.setEndOffset(" 4.0 " ).setStartOffset(" 2.0 " ).chain()
.setHeight(250 ).setWidth(400 ).setCrop(" scale " ).chain()
.setFlags(" waveform " ).setColor(" blue " ).setBackground(" transparent " )).generate(" dog.png " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.endOffset(" 4.0 " ).startOffset(" 2.0 " ).chain()
.height(250 ).width(400 ).crop(" scale " ).chain()
.flags(" waveform " ).color(" blue " ).background(" transparent " )).resourceType(" video " ).generate(" dog.png " );
Kotlin (kotlin-url-gen 1.x):
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
The generated image waveforms can be further transformed to match any graphic design and any responsive layout, just like any other image uploaded to Cloudinary.