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.
{
"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([
'type' => 'video',
'src' => 'https://assets.json2video.com/assets/videos/thunder-storm-02.mp4'
]);
$scene1->addElement([
'type' => 'audio',
'src' => 'https://assets.json2video.com/assets/audios/thunder-01.mp3'
]);
$scene1->addElement([
'type' => 'audio',
'src' => 'https://assets.json2video.com/assets/audios/thunder-02.mp3',
'start' => 2.5
]);
$scene1->addElement([
'type' => 'audio',
'src' => 'https://assets.json2video.com/assets/audios/thunder-01.mp3',
'start' => 5.2
]);
$scene1->addElement([
'type' => 'audio',
'src' => 'https://assets.json2video.com/assets/audios/thunder-02.mp3',
'start' => 8
]);
$scene1->duration = 10;
$movie->addScene($scene1);
// Create SCENE 2
$scene2 = new Scene;
$scene2->comment = 'Scene #2';
$scene2->addElement([
'type' => 'video',
'src' => '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({
"type": "video",
"src": "https://assets.json2video.com/assets/videos/thunder-storm-02.mp4"
});
scene1.addElement({
"type": "audio",
"src": "https://assets.json2video.com/assets/audios/thunder-01.mp3"
});
scene1.addElement({
"type": "audio",
"src": "https://assets.json2video.com/assets/audios/thunder-02.mp3",
"start": 2.5
});
scene1.addElement({
"type": "audio",
"src": "https://assets.json2video.com/assets/audios/thunder-01.mp3",
"start": 5.2
});
scene1.addElement({
"type": "audio",
"src": "https://assets.json2video.com/assets/audios/thunder-02.mp3",
"start": 8
});
scene1.set("duration", 10);
movie.addScene(scene1);
// Create SCENE 2
let scene2 = new Scene;
scene2.set("comment", "Scene #2");
scene2.addElement({
"type": "video",
"src": "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();
Your browser does not support the video tag.
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:
{
"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([
'type' => 'video',
'src' => '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([
'type' => 'video',
'src' => 'https://assets.json2video.com/assets/videos/rain-01.mp4'
]);
$scene2->duration = 10;
$movie->addScene($scene2);
$movie->addElement([
'type' => 'audio',
'src' => 'https://assets.json2video.com/assets/audios/thunder-01.mp3'
]);
$movie->addElement([
'type' => 'audio',
'src' => 'https://assets.json2video.com/assets/audios/thunder-02.mp3',
'start' => 2.5
]);
$movie->addElement([
'type' => 'audio',
'src' => 'https://assets.json2video.com/assets/audios/thunder-01.mp3',
'start' => 5.2
]);
$movie->addElement([
'type' => 'audio',
'src' => 'https://assets.json2video.com/assets/audios/thunder-02.mp3',
'start' => 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({
"type": "video",
"src": "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({
"type": "video",
"src": "https://assets.json2video.com/assets/videos/rain-01.mp4"
});
scene2.set("duration", 10);
movie.addScene(scene2);
movie.addElement({
"type": "audio",
"src": "https://assets.json2video.com/assets/audios/thunder-01.mp3"
});
movie.addElement({
"type": "audio",
"src": "https://assets.json2video.com/assets/audios/thunder-02.mp3",
"start": 2.5
});
movie.addElement({
"type": "audio",
"src": "https://assets.json2video.com/assets/audios/thunder-01.mp3",
"start": 5.2
});
movie.addElement({
"type": "audio",
"src": "https://assets.json2video.com/assets/audios/thunder-02.mp3",
"start": 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.
Your browser does not support the video tag.