Audio controls and mixing

Providing users with control over audio levels is a key WCAG requirement. This page covers programmatic volume adjustment using Cloudinary transformations, the Cloudinary Video Player's built-in controls, and mixing multiple audio tracks to achieve the correct foreground-to-background separation.

Adjust audio volume

For people with hearing impairments or those in different listening environments, providing volume control options ensures your audio and video content is accessible. The WCAG guidelines specify that if audio plays automatically for more than 3 seconds, users must have a mechanism to pause, stop, or control the volume independently.

With Cloudinary, you can implement this mechanism both programmatically and using the Cloudinary Video Player.

Programmatic volume adjustment

Programmatically adjust the volume directly in your media transformations using the volume effect (e_volume). This allows you to give control to your users via external controls (as shown in the demo).

For example, to reduce the volume to 50% (e_volume:-50):

To increase the volume by 150% (e_volume:150):

You can also mute audio completely by setting the volume to mute:

Demo: External volume controls using transformations

For users with restricted movement or motor disabilities, you can create larger, more accessible volume controls outside the video player. These external controls use Cloudinary's volume transformations to deliver videos at different volume levels, making them easier to interact with than the built-in player controls. You can see the delivery URL change when you choose a different volume.

Video Player volume controls

The Cloudinary Video Player provides built-in volume controls that users can adjust according to their needs. The player includes both a volume button and a volume slider for precise control.

You can customize the volume controls and set default volume levels in your JavaScript:

Mixing audio tracks

For users with hearing difficulties or auditory processing disorders, the ability to control the balance between foreground speech and background audio is crucial for accessibility. The WCAG guidelines specify that background sounds should be at least 20 decibels lower than foreground speech content, or users should have the ability to turn off background sounds entirely.

Cloudinary's audio mixing capabilities allow you to layer multiple audio tracks and control their relative volumes, ensuring your content meets accessibility requirements while maintaining audio richness.

To control the volume of different audio tracks, use the volume effect in each of the audio layers. In this example, the narration is set to a volume of 3dB higher than the original asset (e_volume:3dB), and the background wind noise is set to a volume of 18dB lower than the original asset (e_volume:-18dB):

Audio normalization for consistent levels

Before mixing audio tracks, it helps to normalize them to consistent baseline levels. Different audio recordings often have varying baseline volumes, which can make it difficult to achieve predictable dB differences for accessibility compliance.

To normalize your audio files before uploading them to Cloudinary, you can use audio processing tools, such as FFmpeg.

For example, normalize the audio file nantech.mp3 to -16 LUFS:

This ensures that when you apply -20dB or -25dB adjustments in Cloudinary, you get the exact dB separation needed for WCAG compliance.

Interactive audio mixing demo

This demo shows how Cloudinary can mix a primary audio track (nanotechnology narration) with a background audio layer (wind sounds). Use the controls to adjust the volume levels and observe how the dB difference affects accessibility:

User-controlled audio track levels

Similar to the above demo, you could provide controls in your application to let the user decide on the levels of each track to meet their needs. Here's some example React code that you could use: