Audio transformations

You can stream audio from any audio or video file in your account, adjust audio settings, or generate audio waveform images from any audio or video file.

On this page:

Audio manipulation and streaming
Audio settings
Auto-generated waveform images

Audio manipulation and streaming

You can upload any audio file to your account, convert the audio file format, extract audio from videos and manipulate 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:

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.mp3

Ruby:

cloudinary_url("dog.mp3", :resource_type=>"video")

PHP:

Cloudinary::cloudinary_url("dog.mp3", array("resource_type"=>"video"))

Python:

cloudinary.utils.cloudinary_url("dog.mp3", resource_type="video")

Node.js:

cloudinary.url("dog.mp3", {resource_type: "video"})

Java:

cloudinary.url().resourceType("video").generate("dog.mp3")

JS:

cloudinary.url('dog.mp3', {resource_type: 'video'});

jQuery:

$.cloudinary.url("dog.mp3", {resource_type: "video"})

React:

cloudinary.url('dog.mp3', {resource_type: 'video'});

Vue.js:

cloudinary.url('dog.mp3', {resource_type: 'video'});

Angular:

cloudinary.url('dog.mp3', {resource_type: 'video'});

.Net:

cloudinary.Api.UrlVideoUp.BuildUrl("dog.mp3")

Android:

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

iOS:

cloudinary.createUrl().setResourceType("video").generate("dog.mp3")

Relevant video transformations apply for audio as well (e.g., trimming), but dimensional or visual related transformations are ignored. For example, converting the first 3 seconds of the MP4 video file named dog to an MP3 audio file:

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/so_0,du_3/dog.mp3

Ruby:

cloudinary_url("dog.mp3", :start_offset=>"0", :duration=>"3", :resource_type=>"video")

PHP:

Cloudinary::cloudinary_url("dog.mp3", array("start_offset"=>"0", "duration"=>"3", "resource_type"=>"video"))

Python:

cloudinary.utils.cloudinary_url("dog.mp3", start_offset="0", duration="3", resource_type="video")

Node.js:

cloudinary.url("dog.mp3", {start_offset: "0", duration: "3", resource_type: "video"})

Java:

cloudinary.url().transformation(new Transformation().startOffset("0").duration("3")).resourceType("video").generate("dog.mp3")

JS:

cloudinary.url('dog.mp3', {startOffset: "0", duration: "3"}, {resource_type: 'video'});

jQuery:

$.cloudinary.url("dog.mp3", {start_offset: "0", duration: "3", resource_type: "video"})

React:

cloudinary.url('dog.mp3', {startOffset: "0", duration: "3"}, {resource_type: 'video'});

Vue.js:

cloudinary.url('dog.mp3', {startOffset: "0", duration: "3"}, {resource_type: 'video'});

Angular:

cloudinary.url('dog.mp3', {startOffset: "0", duration: "3"}, {resource_type: 'video'});

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().StartOffset("0").Duration("3")).BuildUrl("dog.mp3")

Android:

MediaManager.get().url().transformation(new Transformation().startOffset("0").duration("3")).resourceType("video").generate("dog.mp3");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setStartOffset("0").setDuration("3")).generate("dog.mp3")

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

Audio settings are used for adjusting the audio properties of an audio or video file. You can:

Control the audio sampling frequency
Select the audio codec (or remove the audio)
Adjust the audio volume

Audio frequency control

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 audio_frequency in the Video transformations reference table for the possible values.

For example, setting the audio frequency to 22050 Hz in the uploaded mp4 video named dog:

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/af_22050/dog.mp4

Ruby:

cl_video_tag("dog", :audio_frequency=>"22050")

PHP:

cl_video_tag("dog", array("audio_frequency"=>"22050"))

Python:

CloudinaryVideo("dog").video(audio_frequency="22050")

Node.js:

cloudinary.video("dog", {audio_frequency: "22050"})

Java:

cloudinary.url().transformation(new Transformation().audioFrequency("22050")).videoTag("dog");

JS:

cloudinary.videoTag('dog', {audioFrequency: "22050"}).toHtml();

jQuery:

$.cloudinary.video("dog", {audio_frequency: "22050"})

React:

<Video publicId="dog" >
  <Transformation audioFrequency="22050" />
</Video>

Vue.js:

<cld-video publicId="dog" >
  <cld-transformation audioFrequency="22050" />
</cld-video>

Angular:

<cl-video public-id="dog" >
  <cl-transformation audio-frequency="22050">
  </cl-transformation>
</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().AudioFrequency("22050")).BuildVideoTag("dog")

Android:

MediaManager.get().url().transformation(new Transformation().audioFrequency("22050")).resourceType("video").generate("dog.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAudioFrequency("22050")).generate("dog.mp4")

Audio codec settings

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 or flv only)
vorbis (ogv or webm only)
mp3 (mp4 or flv only)
opus (webm only)

For example, removing the audio channel from the uploaded mp4 video named dog:

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/ac_none/dog.mp4

Ruby:

cl_video_tag("dog", :audio_codec=>"none")

PHP:

cl_video_tag("dog", array("audio_codec"=>"none"))

Python:

CloudinaryVideo("dog").video(audio_codec="none")

Node.js:

cloudinary.video("dog", {audio_codec: "none"})

Java:

cloudinary.url().transformation(new Transformation().audioCodec("none")).videoTag("dog");

JS:

cloudinary.videoTag('dog', {audioCodec: "none"}).toHtml();

jQuery:

$.cloudinary.video("dog", {audio_codec: "none"})

React:

<Video publicId="dog" >
  <Transformation audioCodec="none" />
</Video>

Vue.js:

<cld-video publicId="dog" >
  <cld-transformation audioCodec="none" />
</cld-video>

Angular:

<cl-video public-id="dog" >
  <cl-transformation audio-codec="none">
  </cl-transformation>
</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().AudioCodec("none")).BuildVideoTag("dog")

Android:

MediaManager.get().url().transformation(new Transformation().audioCodec("none")).resourceType("video").generate("dog.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAudioCodec("none")).generate("dog.mp4")

Adjust the audio volume

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%:

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/w_500,e_volume:50/dog.mp4

Ruby:

cl_video_tag("dog", :width=>500, :effect=>"volume:50", :crop=>"scale")

PHP:

cl_video_tag("dog", array("width"=>500, "effect"=>"volume:50", "crop"=>"scale"))

Python:

CloudinaryVideo("dog").video(width=500, effect="volume:50", crop="scale")

Node.js:

cloudinary.video("dog", {width: 500, effect: "volume:50", crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(500).effect("volume:50").crop("scale")).videoTag("dog");

JS:

cloudinary.videoTag('dog', {width: 500, effect: "volume:50", crop: "scale"}).toHtml();

jQuery:

$.cloudinary.video("dog", {width: 500, effect: "volume:50", crop: "scale"})

React:

<Video publicId="dog" >
  <Transformation width="500" effect="volume:50" crop="scale" />
</Video>

Vue.js:

<cld-video publicId="dog" >
  <cld-transformation width="500" effect="volume:50" crop="scale" />
</cld-video>

Angular:

<cl-video public-id="dog" >
  <cl-transformation width="500" effect="volume:50" crop="scale">
  </cl-transformation>
</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(500).Effect("volume:50").Crop("scale")).BuildVideoTag("dog")

Android:

MediaManager.get().url().transformation(new Transformation().width(500).effect("volume:50").crop("scale")).resourceType("video").generate("dog.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setWidth(500).setEffect("volume:50").setCrop("scale")).generate("dog.mp4")

For all volume effect options, see the volume parameter in the Video Transformation Reference.

Auto-generated waveform images

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:

Creating waveform images.
Customizing the waveform image.

Creating waveform images

To create a waveform image from an audio or video file uploaded to your Cloudinary account, 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 account, scaled to a height of 200 pixels and a width of 500 pixels:

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/h_200,w_500,fl_waveform/dog.png

Ruby:

cl_image_tag("dog.png", :height=>200, :width=>500, :flags=>"waveform", :resource_type=>"video")

PHP:

cl_image_tag("dog.png", array("height"=>200, "width"=>500, "flags"=>"waveform", "resource_type"=>"video"))

Python:

CloudinaryVideo("dog.png").image(height=200, width=500, flags="waveform")

Node.js:

cloudinary.image("dog.png", {height: 200, width: 500, flags: "waveform", resource_type: "video"})

Java:

cloudinary.url().transformation(new Transformation().height(200).width(500).flags("waveform")).resourceType("video").imageTag("dog.png");

JS:

cloudinary.videoTag('dog.png', {height: 200, width: 500, flags: "waveform"}).toHtml();

jQuery:

$.cloudinary.image("dog.png", {height: 200, width: 500, flags: "waveform", resource_type: "video"})

React:

<Video publicId="dog.png" resourceType="video">
  <Transformation height="200" width="500" flags="waveform" />
</Video>

Vue.js:

<cld-video publicId="dog.png" resourceType="video">
  <cld-transformation height="200" width="500" flags="waveform" />
</cld-video>

Angular:

<cl-video public-id="dog.png" resource-type="video">
  <cl-transformation height="200" width="500" flags="waveform">
  </cl-transformation>
</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(200).Width(500).Flags("waveform")).BuildImageTag("dog.png")

Android:

MediaManager.get().url().transformation(new Transformation().height(200).width(500).flags("waveform")).resourceType("video").generate("dog.png");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(200).setWidth(500).setFlags("waveform")).generate("dog.png")

Customizing the waveform image

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:

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/h_200,w_500,fl_waveform,co_black,b_white/dog.png

Ruby:

cl_image_tag("dog.png", :height=>200, :width=>500, :flags=>"waveform", :color=>"black", :background=>"white", :resource_type=>"video")

PHP:

cl_image_tag("dog.png", array("height"=>200, "width"=>500, "flags"=>"waveform", "color"=>"black", "background"=>"white", "resource_type"=>"video"))

Python:

CloudinaryVideo("dog.png").image(height=200, width=500, flags="waveform", color="black", background="white")

Node.js:

cloudinary.image("dog.png", {height: 200, width: 500, flags: "waveform", color: "black", background: "white", resource_type: "video"})

Java:

cloudinary.url().transformation(new Transformation().height(200).width(500).flags("waveform").color("black").background("white")).resourceType("video").imageTag("dog.png");

JS:

cloudinary.videoTag('dog.png', {height: 200, width: 500, flags: "waveform", color: "black", background: "white"}).toHtml();

jQuery:

$.cloudinary.image("dog.png", {height: 200, width: 500, flags: "waveform", color: "black", background: "white", resource_type: "video"})

React:

<Video publicId="dog.png" resourceType="video">
  <Transformation height="200" width="500" flags="waveform" color="black" background="white" />
</Video>

Vue.js:

<cld-video publicId="dog.png" resourceType="video">
  <cld-transformation height="200" width="500" flags="waveform" color="black" background="white" />
</cld-video>

Angular:

<cl-video public-id="dog.png" resource-type="video">
  <cl-transformation height="200" width="500" flags="waveform" color="black" background="white">
  </cl-transformation>
</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(200).Width(500).Flags("waveform").Color("black").Background("white")).BuildImageTag("dog.png")

Android:

MediaManager.get().url().transformation(new Transformation().height(200).width(500).flags("waveform").color("black").background("white")).resourceType("video").generate("dog.png");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(200).setWidth(500).setFlags("waveform").setColor("black").setBackground("white")).generate("dog.png")

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 account, scaled to a height of 250 pixels and a width of 400 pixels, with the waveform rendered in blue on a transparent background:

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/h_250,w_400,fl_waveform,so_2,eo_4,co_blue,b_transparent/dog.png

Ruby:

cl_image_tag("dog.png", :height=>250, :width=>400, :flags=>"waveform", :start_offset=>"2", :end_offset=>"4", :color=>"blue", :background=>"transparent", :resource_type=>"video")

PHP:

cl_image_tag("dog.png", array("height"=>250, "width"=>400, "flags"=>"waveform", "start_offset"=>"2", "end_offset"=>"4", "color"=>"blue", "background"=>"transparent", "resource_type"=>"video"))

Python:

CloudinaryVideo("dog.png").image(height=250, width=400, flags="waveform", start_offset="2", end_offset="4", color="blue", background="transparent")

Node.js:

cloudinary.image("dog.png", {height: 250, width: 400, flags: "waveform", start_offset: "2", end_offset: "4", color: "blue", background: "transparent", resource_type: "video"})

Java:

cloudinary.url().transformation(new Transformation().height(250).width(400).flags("waveform").startOffset("2").endOffset("4").color("blue").background("transparent")).resourceType("video").imageTag("dog.png");

JS:

cloudinary.videoTag('dog.png', {height: 250, width: 400, flags: "waveform", startOffset: "2", endOffset: "4", color: "blue", background: "transparent"}).toHtml();

jQuery:

$.cloudinary.image("dog.png", {height: 250, width: 400, flags: "waveform", start_offset: "2", end_offset: "4", color: "blue", background: "transparent", resource_type: "video"})

React:

<Video publicId="dog.png" resourceType="video">
  <Transformation height="250" width="400" flags="waveform" startOffset="2" endOffset="4" color="blue" background="transparent" />
</Video>

Vue.js:

<cld-video publicId="dog.png" resourceType="video">
  <cld-transformation height="250" width="400" flags="waveform" startOffset="2" endOffset="4" color="blue" background="transparent" />
</cld-video>

Angular:

<cl-video public-id="dog.png" resource-type="video">
  <cl-transformation height="250" width="400" flags="waveform" start-offset="2" end-offset="4" color="blue" background="transparent">
  </cl-transformation>
</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(250).Width(400).Flags("waveform").StartOffset("2").EndOffset("4").Color("blue").Background("transparent")).BuildImageTag("dog.png")

Android:

MediaManager.get().url().transformation(new Transformation().height(250).width(400).flags("waveform").startOffset("2").endOffset("4").color("blue").background("transparent")).resourceType("video").generate("dog.png");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(250).setWidth(400).setFlags("waveform").setStartOffset("2").setEndOffset("4").setColor("blue").setBackground("transparent")).generate("dog.png")

Waveform of a partial video with color customization

The generated image waveforms can be further manipulated to match any graphic design and any responsive layout, just like any other image uploaded to Cloudinary.

✔️ Feedback sent!

✖️

Error

Unfortunately there's been an error sending your feedback.

Is this page helpful?