Audio elements

Audio is one of the most important parts of any video production, making users engage with the content and the message. Audio elements allow you to add sound and music to your video and works in a quite similar way than Video elements.

If an audio element is added to a scene, the audio is contained in the scene and will be cut when moving to the next scene. On the other hand if an Audio element is added directly as a movie element, the audio is played over the scenes. Now we will see this in the next 2 examples.

Adding sound to a scene

In this first example we will create a video with 2 scenes. In the first scene we will add some thunder sound effects to a muted video, and we will leave the second scene without audio.

JSON
PHP
NodeJS

{
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "comment": "Scene #1",
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/thunder-storm-02.mp4"
                },
                {
                    "type": "audio",
                    "src": "https://assets.json2video.com/assets/audios/thunder-01.mp3"
                },
                {
                    "type": "audio",
                    "src": "https://assets.json2video.com/assets/audios/thunder-02.mp3",
                    "start": 2.5
                },
                {
                    "type": "audio",
                    "src": "https://assets.json2video.com/assets/audios/thunder-01.mp3",
                    "start": 5.2
                },
                {
                    "type": "audio",
                    "src": "https://assets.json2video.com/assets/audios/thunder-02.mp3",
                    "start": 8
                }
            ],
            "duration": 10
        },
        {
            "comment": "Scene #2",
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/rain-01.mp4"
                }
            ],
            "duration": 10
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->resolution = 'full-hd';
$movie->quality = 'high';

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->comment = 'Scene #1';
$scene1->addElement([
'video',
'https://assets.json2video.com/assets/videos/thunder-storm-02.mp4'
]);
$scene1->addElement([
'audio',
'https://assets.json2video.com/assets/audios/thunder-01.mp3'
]);
$scene1->addElement([
'audio',
'https://assets.json2video.com/assets/audios/thunder-02.mp3',
2.5
]);
$scene1->addElement([
'audio',
'https://assets.json2video.com/assets/audios/thunder-01.mp3',
5.2
]);
$scene1->addElement([
'audio',
'https://assets.json2video.com/assets/audios/thunder-02.mp3',
8
]);
$scene1->duration = 10;
$movie->addScene($scene1);

// Create SCENE 2
$scene2 = new Scene;
$scene2->comment = 'Scene #2';
$scene2->addElement([
'video',
'https://assets.json2video.com/assets/videos/rain-01.mp4'
]);
$scene2->duration = 10;
$movie->addScene($scene2);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("resolution", "full-hd");
movie.set("quality", "high");

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("comment", "Scene #1");
scene1.addElement([
"video",
"https://assets.json2video.com/assets/videos/thunder-storm-02.mp4"
]);
scene1.addElement([
"audio",
"https://assets.json2video.com/assets/audios/thunder-01.mp3"
]);
scene1.addElement([
"audio",
"https://assets.json2video.com/assets/audios/thunder-02.mp3",
2.5
]);
scene1.addElement([
"audio",
"https://assets.json2video.com/assets/audios/thunder-01.mp3",
5.2
]);
scene1.addElement([
"audio",
"https://assets.json2video.com/assets/audios/thunder-02.mp3",
8
]);
scene1.set("duration", 10);
movie.addScene(scene1);

// Create SCENE 2
let scene2 = new Scene;
scene2.set("comment", "Scene #2");
scene2.addElement([
"video",
"https://assets.json2video.com/assets/videos/rain-01.mp4"
]);
scene2.set("duration", 10);
movie.addScene(scene2);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

As expected, when the video switches from scene #1 to scene #2, audio gets muted as scene #2 has no audio.

Adding sound to a movie with multiple scenes

In this second example, we will add the sound effects as movie elements instead of scene #1 elements:

JSON
PHP
NodeJS

{
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "comment": "Scene #1",
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/thunder-storm-02.mp4"
                }
            ],
            "duration": 10
        },
        {
            "comment": "Scene #2",
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/rain-01.mp4"
                }
            ],
            "duration": 10
        }
    ],
    "elements": [
        {
            "type": "audio",
            "src": "https://assets.json2video.com/assets/audios/thunder-01.mp3"
        },
        {
            "type": "audio",
            "src": "https://assets.json2video.com/assets/audios/thunder-02.mp3",
            "start": 2.5
        },
        {
            "type": "audio",
            "src": "https://assets.json2video.com/assets/audios/thunder-01.mp3",
            "start": 5.2
        },
        {
            "type": "audio",
            "src": "https://assets.json2video.com/assets/audios/thunder-02.mp3",
            "start": 8
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->resolution = 'full-hd';
$movie->quality = 'high';

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->comment = 'Scene #1';
$scene1->addElement([
'video',
'https://assets.json2video.com/assets/videos/thunder-storm-02.mp4'
]);
$scene1->duration = 10;
$movie->addScene($scene1);

// Create SCENE 2
$scene2 = new Scene;
$scene2->comment = 'Scene #2';
$scene2->addElement([
'video',
'https://assets.json2video.com/assets/videos/rain-01.mp4'
]);
$scene2->duration = 10;
$movie->addScene($scene2);
$movie->addElement([
'audio',
'https://assets.json2video.com/assets/audios/thunder-01.mp3'
]);
$movie->addElement([
'audio',
'https://assets.json2video.com/assets/audios/thunder-02.mp3',
2.5
]);
$movie->addElement([
'audio',
'https://assets.json2video.com/assets/audios/thunder-01.mp3',
5.2
]);
$movie->addElement([
'audio',
'https://assets.json2video.com/assets/audios/thunder-02.mp3',
8
]);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("resolution", "full-hd");
movie.set("quality", "high");

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("comment", "Scene #1");
scene1.addElement([
"video",
"https://assets.json2video.com/assets/videos/thunder-storm-02.mp4"
]);
scene1.set("duration", 10);
movie.addScene(scene1);

// Create SCENE 2
let scene2 = new Scene;
scene2.set("comment", "Scene #2");
scene2.addElement([
"video",
"https://assets.json2video.com/assets/videos/rain-01.mp4"
]);
scene2.set("duration", 10);
movie.addScene(scene2);
movie.addElement([
"audio",
"https://assets.json2video.com/assets/audios/thunder-01.mp3"
]);
movie.addElement([
"audio",
"https://assets.json2video.com/assets/audios/thunder-02.mp3",
2.5
]);
movie.addElement([
"audio",
"https://assets.json2video.com/assets/audios/thunder-01.mp3",
5.2
]);
movie.addElement([
"audio",
"https://assets.json2video.com/assets/audios/thunder-02.mp3",
8
]);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

The resulting video has audio over the 2 scenes, as thunder sound effects extend longer than the scene #1.

Adjusting the music to the length of the movie

It's a common scenario that you want to add a music soundtrack that is longer than the movie itself. In this situations, the music (or any audio) can be adjusted to the length of the movie and also add a final fade out so music does not end abruptly.

The easiest way to do this is to set the duration of the audio element to -2 (sets the length to the duration of the movie) and the fade-out to the number of seconds to fade out the music.

In this example, we will force the audio to match the length of the movie and add a fade out at the end of the movie:

JSON
PHP
NodeJS

{
    "id": "q8azbhvg",
    "comment": "Audio example",
    "width": 1920,
    "height": 1080,
    "draft": false,
    "scenes": [
        {
            "id": "qlhg1xpe",
            "comment": "Intro bumper",
            "elements": [
                {
                    "id": "q9fwzjpg",
                    "type": "component",
                    "component": "basic/000",
                    "settings": {
                        "headline": {
                            "text": [
                                "Example of adjusted music"
                            ],
                            "color": "white",
                            "font-family": "Roboto Mono",
                            "font-weight": "400",
                            "letter-spacing": "0.5px"
                        },
                        "body": {
                            "color": "white",
                            "text": [
                                ""
                            ],
                            "font-family": "Roboto Mono",
                            "font-weight": "400"
                        },
                        "card": {
                            "vertical-align": "center",
                            "text-align": "center",
                            "padding": "2vw"
                        }
                    },
                    "x": 0,
                    "y": 0,
                    "duration": 5,
                    "comment": "Simple card",
                    "position": "custom",
                    "width": -1,
                    "height": -1
                }
            ],
            "background-color": "#000000"
        },
        {
            "id": "qk1jl7du",
            "comment": "Snowy landscape",
            "elements": [
                {
                    "id": "qh6ersxf",
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/landscape-01.mp4",
                    "fade-out": 2
                }
            ]
        }
    ],
    "elements": [
        {
            "id": "qu658a67",
            "type": "audio",
            "src": "https://assets.json2video.com/assets/audios/advertime.mp3",
            "duration": -2,
            "fade-out": 3
        }
    ],
    "resolution": "custom"
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->id = 'q8azbhvg';
$movie->comment = 'Audio example';
$movie->width = 1920;
$movie->height = 1080;
$movie->draft = false;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->id = 'qlhg1xpe';
$scene1->comment = 'Intro bumper';
$scene1->addElement([
'q9fwzjpg',
'component',
'basic/000',
	[
		[
			[
'Example of adjusted music'
			],
'white',
'Roboto Mono',
'400',
'0.5px'
		],
		[
'white',
			[
''
			],
'Roboto Mono',
'400'
		],
		[
'center',
'center',
'2vw'
		]
	],
0,
0,
5,
'Simple card',
'custom',
-1,
-1
]);
$scene1->background-color = '#000000';
$movie->addScene($scene1);

// Create SCENE 2
$scene2 = new Scene;
$scene2->id = 'qk1jl7du';
$scene2->comment = 'Snowy landscape';
$scene2->addElement([
'qh6ersxf',
'video',
'https://assets.json2video.com/assets/videos/landscape-01.mp4',
2
]);
$movie->addScene($scene2);
$movie->addElement([
'qu658a67',
'audio',
'https://assets.json2video.com/assets/audios/advertime.mp3',
-2,
3
]);
$movie->resolution = 'custom';

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("id", "q8azbhvg");
movie.set("comment", "Audio example");
movie.set("width", 1920);
movie.set("height", 1080);
movie.set("draft", false);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("id", "qlhg1xpe");
scene1.set("comment", "Intro bumper");
scene1.addElement([
"q9fwzjpg",
"component",
"basic/000",
	[
		[
			[
"Example of adjusted music"
			],
"white",
"Roboto Mono",
"400",
"0.5px"
		],
		[
"white",
			[
""
			],
"Roboto Mono",
"400"
		],
		[
"center",
"center",
"2vw"
		]
	],
0,
0,
5,
"Simple card",
"custom",
-1,
-1
]);
scene1.set("background-color", "#000000");
movie.addScene(scene1);

// Create SCENE 2
let scene2 = new Scene;
scene2.set("id", "qk1jl7du");
scene2.set("comment", "Snowy landscape");
scene2.addElement([
"qh6ersxf",
"video",
"https://assets.json2video.com/assets/videos/landscape-01.mp4",
2
]);
movie.addScene(scene2);
movie.addElement([
"qu658a67",
"audio",
"https://assets.json2video.com/assets/audios/advertime.mp3",
-2,
3
]);
movie.set("resolution", "custom");

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

The resulting video is (turn volume on):

Balancing music and voice volume

When you want to add music and narration to a video, you typically need to adjust the volume so that the voice can be heard clearly. The best option is to keep the voice at its original volume and reduce the volume of the music.

For this purpose, the API provides the volume property in elements of type video, audio and voice. This property adjusts the volume gain.

This means it is a relative volume value compared to the original volume:

A value of 1 means there is no gain, and the original audio remains unchanged.
Values greater than 1 increase the gain, making the volume louder.
Values less than 1 decrease the gain, making the volume lower.

When you are combining music and voice, the recommended option in these cases is:

Keep the voice at volume 1
Apply a volume of 0.3 for the music

Depending on the type of music, you may need to adjust the value of 0.3, but you can start testing from that value.

← API Tutorial

Types of elements

Adding sound to a scene

Adding sound to a movie with multiple scenes

Adjusting the music to the length of the movie

Balancing music and voice volume