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

Published on February 22, 2022

Last updated on September 25, 2022

5 min read

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(opens in a new tab) and a background music file provided by pixabay.com(opens in a new tab) 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(opens in a new tab): (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:

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

No need to have FFmpeg installed on your machine

Setup a new Node.js project using the Editframe CLI:

npx @editframe/create@beta

Install the required dependencies:

cd add-a-new-audio-source-to-your-video && npm install

Add assets to the project:

Add video.mp4 and background-music.mp3 to the assets folder in the project directory.

Update the index.html file with the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script type="module" src="./src/index.js"></script>
    <link rel="stylesheet" href="./src/styles.css" />
  </head>
  <body>
    <ef-timegroup
      mode="sequence"
      class="w-[1920px] h-[1080px]"
    >
      <ef-timegroup
        mode="contain"
        class="w-full h-full"
      >
      <ef-video  style="z-index: 1; object-fit:cover;" src="/assets/video.mp4"></ef-video>
      <ef-audio  src="/assets/background-music.mp3"></ef-audio>
      </ef-timegroup>
    </ef-timegroup>
  </body>
</html>

Let’s walk through what the code in this file is doing.

In these lines, we import the index.js file and the styles.css file which contains the styles for the video and @editframe/elements:

<head>
    <meta charset="UTF-8" />
    <script type="module" src="./src/index.js"></script>
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

In this line, we create a new video composition using the ef-timegroup element.

<ef-timegroup
      mode="sequence"
      class="w-[1920px] h-[1080px]"
    >
    { /* Add elements here */ }
</ef-timegroup>

In these lines, we import the video and audio files:

<ef-video  style="z-index: 1; object-fit:cover; width: 100%; height: 100%;" src="/assets/video.mp4"></ef-video>
<ef-audio  src="/assets/background-music.mp3"></ef-audio>

ef-audio is an Editframe element that allows you to add audio files to your video composition.
ef-video is an Editframe element that allows you to add videos to your video composition.
Preview the project:

npx vite .

Update the .env file with your Editframe API token:

EF_TOKEN="YOUR_API_TOKEN"

Render the video:

npx @editframe/cli render .

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.