Add a New Audio Source to your Video using FFmpeg and Editframe

Have you ever wished you could add a new audio layer to a video without having to get rid of the existing audio in the file? Perhaps you want to add a voiceover, include sound effects, or introduce an ambient layer of background music. Whatever the case may be, there are many ways in which adding a new layer of sound can make your videos more interesting, and increase value and enjoyment for your viewers.

In this guide, we’ll walk through how to add an audio file to a video without removing the original video's audio using two methods––FFmpeg, and the Editframe API. Once you master these workflows, you’ll easily be able to accomplish use cases including:

Replacing audio in a video file while retaining the original audio
Adding an audio voiceover to a video
Adding sound effects on top of an existing video
Adding a soundtrack to play over or behind your existing audio
Adding low volume audio or music to a video

Let’s get started!

File assets

Here’s the sample video files provided by pexels.com and a background music file provided by pixabay.com to use it in this tutorial.

video.mp4

background-music.mp3

Part 1: Using FFmpeg

First, we’ll walk through this workflow using FFmpeg.

Required Tools

Sample video and audio files (provided above)
FFmpeg: (You’ll need to install FFmpeg and set up the appropriate environment variables before beginning this tutorial)

Add background music to your video

Here is the FFmpeg command to add background music to your video and lower the volume of this music to 0.10:

ffmpeg -i video.mp4  -i background-music.mp3  \
-filter_complex "[1:a]volume=0.10,apad[A];[0:a][A]amerge[out]" \
-c:v copy -map 0:v -map "[out]" -y output.mp4

Let’s break down the FFmpeg command above.

In this line, we import the file video.mp4 and the background-music.mp3 files.

ffmpeg -i video.mp4  -i background-music.mp3  \

In this line, we change the volume of second audio input [1:a] to 0.10, and merge the video audio stream [0:a] with [A] (background-music.mp3 with volume to 0.10). We also set the audio composition to [out].

-filter_complex "[1:a]volume=0.10,apad[A];[0:a][A]amerge[out]" \

In this line, we will copy and map the video stream. We also map the [out] audio streams into output.mp4:

-c:v copy -map 0:v -map "[out]" -y output.mp4

Here’s the output video from the FFmpeg command:

output.mp4

Part 2: Using Editframe

Now let’s perform the same task using Editframe instead of FFmpeg.

Required tools:

Node.js installed on your machine (v16+)
Editframe API Token (you can create an account from this link)

*No need to have FFmpeg installed on your machine

Create a folder project:

mkdir editframe-video-audio-mixing

Initialize a Node.js project:

yarn init -y

Install the Editframe Node.js SDK:

yarn add @editframe/editframe-js

Create an index.js file to merge videos into one video:

// require("dotenv").config({});

const { Editframe } = require("@editframe/editframe-js");
const path = require("path");
(async () => {
  const editframe = new Editframe({
    token: process.env.EDITFRAME_TOKEN,
  });
  const composition = await editframe.videos.new({
    backgroundColor: "#000",
    dimensions: {
      height: 1920,
      width: 1080,
    },
    duration: 8,
  });
  await composition.addVideo(path.resolve("video.mp4"), {
    size: { format: "fill" },
  });
  await composition.addAudio(path.resolve("background-music.mp3"), {
    volume: 0.1,
  });
  const video = await composition.encodeSync();
  console.log(video);
})();

Let’s break down what the code above is doing.

In these lines, we initialize an Editframe instance with your Editframe Token:

  const editframe = new Editframe({
    token: process.env.EDITFRAME_TOKEN,
  });

Here, we create a new video composition with 1920x1080 dimensions and a black background for 8 seconds:

const composition = await editframe.videos.new({
    backgroundColor: "#000",
    dimensions: {
      height: 1920,
      width: 1080,
    },
    duration: 8,
  });

In these lines of code, we will add the video to Editframe composition using composition.addVideo method:

await composition.addVideo(path.resolve("video.mp4"), {
    size: { format: "fill" },
  });

Here, we will add the background music track with low volume using composition.addAudio method:

await composition.addAudio(path.resolve("background-music.mp3"), {
    volume: 0.1,
  });

In these lines, we encode the video synchronously but we can also do it async using a webhook:

const video = await composition.encodeSync();
console.log(video);

Run the video script:

node index

Here’s the output video from the Editframe API:

Here is a comparison video between the videos produced with FFmpeg (left) and Editframe (right):

compare.mp4

You can also add transitions, filters, trim your videos, and more. Learn more about this process and the APIs involved in the Editframe API docs.