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 Client ID and 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({
    clientId: process.env.EDITFRAME_CLIENT_ID,
    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 Client ID and token:
  const editframe = new Editframe({
    clientId: process.env.EDITFRAME_CLIENT_ID,
    token: process.env.EDITFRAME_TOKEN,
  });
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" },
  });
await composition.addAudio(path.resolve("background-music.mp3"), {
    volume: 0.1,
  });
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.

© 2022 Editframe
Making video creation easier for software developers.