Add music to an image using FFmpeg

Video content tends to perform very well on social networks and possesses more potential to go viral than static images and text. Producing original video content at scale can be very labor-intensive and time consuming, however. Fortunately, by adding music or another soundtrack to an image, you can effectively turn a photo into a video, and reap all of the benefits that a steady stream of video content affords without having to create these assets from scratch.

This tutorial will show you how to combine an image and an audio file into a video programmatically using two methods—FFmpeg, and the Editframe video API. Using this method, you can quickly and easily create videos that you can upload directly to social networks. You can also use this work flow to do things like:

• Converting podcast snippets into videos for use across Instagram, YouTube, and other video platforms
• Adding background audio to a vlog or radio show
• (For musicians) Creating album or single previews for Twitter, TikTok, and Instagram
• (For marketing agencies) Making quick promotional videos out of an image and voice over to quickly A/B test hundreds of variants
• Adding music to an image to make an audiogram
• Promote a podcast or song on TikTok

Let’s get started!

Files Assets

Here’s a sample image file provided by unsplash.com, and a background music file from pixabay.com that we will use in this tutorial:

image.jpg

background-music.mp3

Part 1: Using FFmpeg

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

Required Tools

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

Here’s the FFmpeg command to create a video out of an image and background audio track:

ffmpeg -loop 1 -i image.jpg -i background-music.mp3 \-c:v libx264 -tune stillimage -c:a aac -b:a 192k -pix_fmt yuv420p \-t 5 out-image.mp4

Let’s step through what this code is doing.

• In this line, we import image.jpg and background-music.mp3. We then loop through the image during the video -loop 1.

ffmpeg -loop 1 -i image.jpg -i background-music.mp3 \

• Here, we copy the video and audio streams. -tune stillimage optimizes for image encoding:

-c:v libx264 -tune stillimage -c:a aac -b:a 192k -pix_fmt yuv420p \

• In this line, we set the duration of the video to 5 seconds:

-t 5 out-image.mp4

Here’s the output video from the FFmpeg command:

out-image.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 for your project:

mkdir editframe-music-image

• Initialize the Node.js project:

cd editframe-music-image && yarn init -y

• Install the Editframe Node.js SDK:

yarn add @editframe/editframe-js

• Create a create-video.js file to merge videos into one a single video:

const { Editframe } = require('@editframe/editframe-js')

async function main() {
  const editframe = new Editframe({
    develop: true,
    token: 'YOUR_EDITFRAME_TOKEN',
  })

  const composition = await editframe.videos.new({
    backgroundColor: '#000',
    dimensions: {
      height: 1080,
      width: 1920,
    },
    duration: 5,
  })
  await composition.addImage(`${__dirname}/image.jpg`, {
    size: { format: 'fit' },
  })
  await composition.addAudio(`${__dirname}/background-music.mp3`)
  const video = await composition.encodeSync()
  console.log(video)
}

main()

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

• In this line of code, we initialize an Editframe instance with our Editframe Token (obtained by creating an Editframe application).

const editframe = new Editframe({
  develop: true,
  token: 'YOUR_EDITFRAME_TOKEN',
})

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

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

• In this line of code, we add the image file path to the video composition using the composition.addImage method:

await composition.addImage(`${__dirname}/image.jpg`, {
  size: { format: 'fit' },
})

• Here, we add the background music track path to the video composition using composition.addAudio method:

await composition.addAudio(`${__dirname}/background-music.mp3`)

• Here is where we encode the video synchronously. (We could also do this async using a webhook):

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

• Now, run the video script:

node ./create-video.js

Boom! Here’s the output video from the Editframe API:

editframe-image.mp4

Note: Editframe also lets you add transitions, filters, trim videos, and do much more. Learn more from the Editframe API docs.

Comparison video between FFmpeg and Editframe API

Here’s a comparison of the videos created with Editframe (left) and FFmpeg (right):

compare-image.mp4