Web Performance Exploring Video Hosting The Art of Compromise: How Lossy Compression Works Understanding the ‘Image Loading Error’: Comprehensive Guide A Comprehensive Guide to Resizing Images on iOS VBR vs CBR: Understanding Bitrate for Optimal Media Handling Displaying Images with Python’s Top 5 Image Libraries 4 Ways to Add Images to GitHub README + 1 Bonus Method Converting Images with Python JavaScript Image Optimization Techniques Building an Image Picker in React with react-native-image-crop-picker 6 Ways to Save Images in Python 5 Ways to Import Images in React + Bonus Automation Method Extract Text from Images in Python with Pillow and pytesseract Downloading Image from URL in Python: 5 Ways with Code Examples Image.open Python Function: Syntax and Quick Tutorial Complete Guide to Video SEO & Automating It With Cloudinary A Complete Guide To Website Image Optimization Video Encoding: How It Works, Formats & Best Practices The Developer’s Guide to PDFs Integrating Cloudinary With Gatsby For Image Optimization Mastering Image Optimization With Netlify And Cloudinary Seamlessly Integrate Cloudinary With Netlify For Optimised Website Assets Ultimate Guide to Asset Optimization Using Cloudinary and Netlify Adding Video To Magento Understanding Magento Media Adding a Video Widget to Your Website: What You Need to Know SDR vs. HDR: Differences and 5 Considerations for Content Creators Audio Manipulation In PHP Image Management Systems: Key Capabilities and Best Practices Video CDN: Why You Need It and Top 5 Video CDNs Video Optimization: Why You Need It and 5 Critical Best Practices Multi CDN: 8 Amazing Benefits, Methods, and Best Practices What Is an Optimized Website and 6 Ways to Optimize Yours Understanding Image Hosting for Websites Sprite Generation with CSS and 4 Automated Tools 8 Image SEO Optimization Tips to Improve Your Search Rankings Website Speed: 5 Reasons Your Site is Slow and How to Fix It Web Performance: What is it, Trends and Insights for 2024

Audio Manipulation In PHP

php audio manipulation

In today’s digital landscape, audio content is increasingly important for engaging and retaining users. From background music to sound effects, audio can add a new dimension to your website or application, creating a more immersive and interactive experience.

With PHP audio manipulation, you can create custom audio content tailored to your specific needs, whether you’re creating a podcast, a music streaming service, or a game.

One of the key benefits of audio manipulation in PHP is its versatility.

This lesson will show you how to manipulate the audio in videos and make original audio-video compositions using a PHP SDK.

What Are Audio Overlays?

An audio overlay in a video is an additional audio track played on top of the existing audio track. The purpose of an audio layover is to add supplementary or alternative audio content to a video, like using an audio overlay to add background music or sound effects to a video. Alternatively, one could add a voiceover or commentary track to a video.

Video editing software can add audio overlays to a video during post-production. The software allows the user to adjust the volume of the overlay, synchronize it with the video, and fade it in and out as needed. This can be useful for creating engaging and informative videos with multiple audio layers, each serving a different purpose.

Why Add Audio Overlay to a Video?

Adding an audio overlay can increase a video’s overall effect and engagement. This allows you to include narration, background music, sound effects, and other audio components that enhance the visuals and give the spectator a more engaging experience.

Why Would You Need to Add an Audio Overlay?

You may need to add an audio overlay to a video in various situations, such as:

  • If the original audio is poor quality or includes unwelcome background noise, you can add a new overlay to improve audio quality.
  • A video’s message, atmosphere, or emotions can all be improved by adding new audio layers. In video advertisements or promotional videos, this is particularly helpful.
  • If a video was initially silent, you might occasionally need to add audio to it if you want to add voiceover instructions to a tutorial.

How to Programmatically Add PHP Audio to Video

Now that we understand how an audio overlay can enhance videos let’s explore how we can simplify the process with PHP audio.

Pre-requisites

Before we can dive into this tutorial, you will need to create a Cloudinary account. Next, you’ll need a PHP development environment. Luckily, XAMPP is a free, easy-to-install Apache distribution with a development environment. You can install it easily by visiting their official website.

Finally, you will need to install Composer to manage your PHP dependencies. You can easily install it by visiting their page and following the directions.

Once you have everything installed, the last thing you’ll need is to create your project. Head over to the htdocs folder in your XAMPP directory. Open up this folder and create a sample project folder. Here we are creating a folder named cloudinary_php.

Docs

Next, open up this folder in your terminal and install the Cloudinary PHP SDK using Composer:

composer require cloudinary/cloudinary_php

Now that everything is ready, we can start coding with PHP.

Adding A PHP Audio Overlay to Your Video

First, open a new PHP file in your project directory in your favorite IDE. Next, import the PHP SDK using the require_once statement:

require_once __DIR__ . '/vendor/autoload.php';

Then, we import the required classes from the SDK using the use statement:

use Cloudinary\Configuration\Configuration;
use Cloudinary\Api\Upload\UploadApi;
use Cloudinary\Asset\Video;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Overlay;

Here the Configuration class helps us configure our Cloudinary environment with our API credentials. The UploadApi will help us upload our assets to the cloud. Finally, the Video, Source, and Overlay will help us with our overlay transformation.

The next step will be to define our API. So first, head to the Cloudinary website and log in to your account. Copy your Cloud Name, API Key, and API Secret:

Cloudinary dashboard

Start by configuring the API using the Configuration::instance() method. This method takes your Cloudinary API credentials as a parameter and configures your SDK instance:

Configuration::instance('cloudinary://my_key:my_secret@my_cloud_name');

Replace my_key, my_secret, and my_cloud_name with your actual API credentials. Alternatively, you can set them as environment variables.

Now that our API is ready, we need to upload our assets to the cloud. Create a new folder named assets in your project directory, And add the video and audio that you want to use:

Files

We’ll use electronic.mp3 and hourglass_timer.mp4 from the Cloudinary demo cloud.

Next, we create an instance of the UploadApi class, which is used to upload the files. We then call the upload() method to upload our assets to the cloud. The method takes the file path and some additional parameters as arguments.

In this case, we are setting the resource_type to video for the video file and auto for the audio file. Additionally, we are defining the public_id parameter to set the public ID of the uploaded files. This unique identifier will help us access the file on our Cloudinary cloud:

// Upload the video and the audio files
$uploadApi = new UploadApi();
$videoUpload = $uploadApi->upload('.\assets\hourglass_timer.mp4', ['resource_type' => 'video', 'public_id' => 'hourglass']);
$audioUpload = $uploadApi->upload('.\assets\electronic.mp3', ['resource_type' => 'auto', 'public_id' => 'electronic']);

We can add our overlay to our video now that we have uploaded our assets.

First, we generate a Video object. This represents a Cloudinary video asset and can be used to apply various transformations to the video. Next, we add an audio overlay to the video using the overlay() method and the Overlay::source() method. The Overlay::source() method takes a Source object as an argument, created using the Source::video() method. The Source::video() method takes the public ID of the audio file as an argument. We then generate a URL using the toUrl() function:

// Generate the HTML video tag with the transformed video URL
$my_video = (new Video('hourglass'))
    ->overlay(Overlay::source(
        Source::video("electronic")
    ))->toUrl();

You can learn more about PHP audio overlays by visiting the Audio Transformations documentation.

Finally, we generate an HTML video tag using the echo statement. Here we set the src attribute of the <source> tag to the transformed video URL:

echo "<video controls><source src=\"$my_video\" type=\"video/mp4\"></video>";

Here is what our final code looks like:

<?php
require_once __DIR__ . '/vendor/autoload.php';

use Cloudinary\Configuration\Configuration;
use Cloudinary\Api\Upload\UploadApi;
use Cloudinary\Asset\Video;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Overlay;


// Replace `cloudinary://my_key:my_secret@my_cloud_name` with your environment variable
Configuration::instance('cloudinary://my_key:my_secret@my_cloud_name');

// Upload the video and the audio files
$uploadApi = new UploadApi();
$videoUpload = $uploadApi->upload('.\assets\hourglass_timer.mp4', ['resource_type' => 'video', 'public_id' => 'hourglass']);
$audioUpload = $uploadApi->upload('.\assets\electronic.mp3', ['resource_type' => 'auto', 'public_id' => 'electronic']);

// Generate the HTML video tag with the transformed video URL
$my_video = (new Video('hourglass'))
    ->overlay(Overlay::source(
        Source::video("electronic")
    ))->toUrl();

echo "<video controls><source src=\"$my_video\" type=\"video/mp4\"></video>";

Now that we have everything set up, we only need to run our PHP audio script. Start by opening up your XAMPP control panel and starting your Apache server:

Control panel

As you can see, our server is running on ports 80 and 443. Next, open up your browser and navigate to http://localhost/your-project-folder-name. This will take you to your project’s index page:

Index page

Now, you just need to run your PHP file by clicking on it. Here is what your output should look like:

Output

File

“Front

Final Thoughts

With the help of Cloudinary’s audio manipulation features, you can enhance your videos and produce distinctive, dynamic content that sticks out. Using PHP code to interact with Cloudinary’s API and SDK, you can make unique audio-video compositions that suit your requirements. Join Cloudinary now to start adding stunning audio effects to your videos!

Learn more:

QUICK TIPS
Tamas Piros
Cloudinary Logo Tamas Piros

In my experience, here are tips that can help you better manipulate audio with PHP, especially when integrating it into video content:

  1. Pre-process audio files for consistency
    Before uploading, normalize and compress your audio files to ensure consistent volume levels and optimize them for fast loading. Tools like FFmpeg can automate these tasks, ensuring your audio files are ready for overlays.
  2. Use multi-threading for large audio processing
    If handling large audio files or multiple simultaneous uploads, consider using PHP’s pcntl_fork() to process tasks in parallel. This can drastically reduce the time it takes to overlay audio on videos in high-traffic environments.
  3. Automate audio syncing with timestamps
    For more complex overlays (like narrations synced to specific video moments), store time-based metadata in your database. This enables you to programmatically adjust the audio start time to perfectly align with key video events.
  4. Leverage background workers for processing
    Audio overlay and video manipulation can be resource-intensive. Offload these tasks to background workers using systems like RabbitMQ or Laravel Queue to prevent server overload and ensure smooth user interactions on the front end.
  5. Optimize media storage with Cloudinary transformations
    Cloudinary’s transformation capabilities allow you to store one master version of each media file and dynamically generate variants. Use this to avoid uploading multiple versions of the same video with different overlays, saving storage space.
  6. Implement caching for frequently accessed media
    When generating videos with audio overlays, store the transformed URLs or files in a cache (like Redis or Memcached) for fast access. This prevents re-processing the same media files, enhancing performance.
  7. Use FFmpeg for advanced audio manipulations
    While Cloudinary handles basic overlays, integrate FFmpeg with PHP for more advanced audio operations (e.g., trimming, fading, pitch correction). This provides more control over how the audio complements the video.
  8. Add dynamic audio tracks based on user preferences
    Allow users to select custom background tracks or narrations by dynamically adjusting the overlay in PHP based on user inputs. This is particularly useful in interactive video content or personalized media experiences.
  9. Optimize audio quality for mobile devices
    Consider compressing and optimizing audio files specifically for mobile playback. Use codecs like AAC or Opus to maintain quality at lower bitrates, ensuring fast load times and minimal data usage for mobile users.
  10. Monitor and log API performance
    Track the performance of your audio overlay operations, especially if using Cloudinary’s API. Implement logging to monitor API call success rates, transformation times, and error handling, ensuring reliable media processing over time.
Last updated: Aug 24, 2024