Optimize audio files

Last updated: Nov-14-2022

Overview

Optimizing your audio files is important for improving performance of your website or application. Compression techniques used on audio files reduce the size of files, speed up download times and reduce the amount of bandwidth required.

This guide focuses on pure audio files. For information on addressing audio components of video files, see the Video optimization guide.

See also

On this page:

How to optimize audio format

Some audio formats use more compression than others, and some use no compression at all. The quality of compressed audio may not be as perfect as the uncompressed equivalent, but for many purposes it is acceptable and the difference is not perceivable by most people.

You can change the format of an audio file that you've uploaded to Cloudinary by changing the delivery URL extension to one of the audio formats that is supported for delivery by Cloudinary.

Note
Audio files are uploaded to Cloudinary as video asset types.

For example, the asset in the demo product environment with public ID docs/fireflywav is a WAV file (not compressed). You can deliver it as an MP3 file (compressed) by using the .mp3 extension in the delivery URL:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinFlutterDartAll
url:
Copy to clipboard
https://res.cloudinary.com/demo/video/upload/docs/fireflywav.mp3
Ruby (cloudinary 1.x):
Copy to clipboard
cloudinary_url("docs/fireflywav.mp3", :resource_type=>"video")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('docs/fireflywav.mp3'));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
Cloudinary::cloudinary_url("docs/fireflywav.mp3", array("resource_type"=>"video"))
Python (cloudinary 1.x):
Copy to clipboard
cloudinary.utils.cloudinary_url("docs/fireflywav.mp3", resource_type="video")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.url("docs/fireflywav.mp3", {resource_type: "video"})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().resourceType("video").generate("docs/fireflywav.mp3")
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("docs/fireflywav.mp3");
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.url('docs/fireflywav.mp3', {resource_type: 'video'});
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.url("docs/fireflywav.mp3", {resource_type: "video"})
React (@cloudinary/react 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("docs/fireflywav.mp3");
React (cloudinary-react 1.x):
Copy to clipboard
cloudinary.url('docs/fireflywav.mp3', {resource_type: 'video'});
Vue.js (@cloudinary/vue 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("docs/fireflywav.mp3");
Vue.js (cloudinary-vue 1.x (legacy)):
Copy to clipboard
cloudinary.url('docs/fireflywav.mp3', {resource_type: 'video'});
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("docs/fireflywav.mp3");
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
cloudinary.url('docs/fireflywav.mp3', {resource_type: 'video'});
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildUrl("docs/fireflywav.mp3")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("docs/fireflywav.mp3")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().resourceType("video").generate("docs/fireflywav.mp3");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("docs/fireflywav.mp3") 
}.generate()
Flutter (cloudinary_flutter 0.x):
Copy to clipboard
cloudinary.video('docs/fireflywav.mp3').transformation(Transformation());
Dart (cloudinary_dart 0.x):
Copy to clipboard
cloudinary.video('docs/fireflywav.mp3').transformation(Transformation());

Use the HTML audio tag

The main audio formats supported by web browsers are AAC, OGG, WAV and MP3.

AAC, OGG and MP3 are compressed formats, so they download faster and use less bandwidth than WAV files. WAV files provide the highest quality, but depending on your application, the sound quality of ACC, OGG and MP3 are likely to be sufficient.

This table shows the file size of the fireflywav audio snippet when delivered in each of the different formats:

Format File Size
AAC 126 KB
OGG 145 KB
MP3 163 KB
WAV 889 KB

If you use the <audio> tag on your site, you can set the src in each of the <source> tags to different formats in your preferred order. The browser picks the first one that it supports. Therefore, to prioritize optimization over quality, design your <audio> tag as follows:

Copy to clipboard
<audio controls>
  <source src="https://res.cloudinary.com/demo/video/upload/docs/fireflywav.aac" type="audio/aac">
  <source src="https://res.cloudinary.com/demo/video/upload/docs/fireflywav.ogg" type="audio/ogg">
  <source src="https://res.cloudinary.com/demo/video/upload/docs/fireflywav.mp3" type="audio/mpeg">
  <source src="https://res.cloudinary.com/demo/video/upload/docs/fireflywav.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>

How to optimize audio quality

Certain compressed audio formats can be compressed further by reducing the bitrate.

Use the bit_rate parameter (br in URLs) for advanced control of the bitrate.

bit_rate can take one of the following values (corresponding to the maximum bitrate):

  • An integer e.g. 120000.
  • A string supporting 'k' and 'm' (kilobits and megabits respectively) e.g. 250k or 2m.

For example, setting the maximum bitrate of the uploaded fireflywav audio snippet to 50k, and delivering it as an MP3, reduces the file size to 61 KB:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinFlutterDartAll
url:
Copy to clipboard
https://res.cloudinary.com/demo/video/upload/br_50k/docs/fireflywav.mp3
Ruby (cloudinary 1.x):
Copy to clipboard
cloudinary_url("docs/fireflywav.mp3", :bit_rate=>"50k", :resource_type=>"video")
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('docs/fireflywav.mp3'))
  ->transcode(Transcode::bitRate("50k"));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
Cloudinary::cloudinary_url("docs/fireflywav.mp3", array("bit_rate"=>"50k", "resource_type"=>"video"))
Python (cloudinary 1.x):
Copy to clipboard
cloudinary.utils.cloudinary_url("docs/fireflywav.mp3", bit_rate="50k", resource_type="video")
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.url("docs/fireflywav.mp3", {bit_rate: "50k", resource_type: "video"})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation().bitRate("50k")).resourceType("video").generate("docs/fireflywav.mp3")
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("docs/fireflywav.mp3").transcode(bitRate("50k"));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.url('docs/fireflywav.mp3', {bitRate: "50k"}, {resource_type: 'video'});
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.url("docs/fireflywav.mp3", {bit_rate: "50k", resource_type: "video"})
React (@cloudinary/react 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("docs/fireflywav.mp3").transcode(bitRate("50k"));
React (cloudinary-react 1.x):
Copy to clipboard
cloudinary.url('docs/fireflywav.mp3', {bitRate: "50k"}, {resource_type: 'video'});
Vue.js (@cloudinary/vue 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("docs/fireflywav.mp3").transcode(bitRate("50k"));
Vue.js (cloudinary-vue 1.x (legacy)):
Copy to clipboard
cloudinary.url('docs/fireflywav.mp3', {bitRate: "50k"}, {resource_type: 'video'});
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("docs/fireflywav.mp3").transcode(bitRate("50k"));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
cloudinary.url('docs/fireflywav.mp3', {bitRate: "50k"}, {resource_type: 'video'});
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().BitRate("50k")).BuildUrl("docs/fireflywav.mp3")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setBitRate("50k")).generate("docs/fireflywav.mp3")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().bitRate("50k")).resourceType("video").generate("docs/fireflywav.mp3");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("docs/fireflywav.mp3")
   transcode(Transcode.bitRate("50k")) 
}.generate()
Flutter (cloudinary_flutter 0.x):
Copy to clipboard
cloudinary.video('docs/fireflywav.mp3').transformation(Transformation()
  .transcode(Transcode.bitRate("50k")));
Dart (cloudinary_dart 0.x):
Copy to clipboard
cloudinary.video('docs/fireflywav.mp3').transformation(Transformation()
  .transcode(Transcode.bitRate("50k")));

See the Transformation URL API reference for further syntax details.

Related topics

Learn about other audio transformations.

✔️ Feedback sent!

Rate this page: