Audiogram elements

The Audiogram elements allow you to add audio waves to your videos automatically. You can customize the color, size and position of the waves and generate creative audiograms for your podcasts or social media videos.

In the following examples we will see how you can include audiogram elements in our videos.

Simple audiogram

In this example we will add a simple audiogram to a scene:

JSON
PHP
NodeJS

{
    "resolution": "hd",
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "comment": "Scene #1",
            "elements": [
                {
                    "type": "audio",
                    "src": "https://assets.json2video.com/assets/audios/mozart-kv525.mp3",
                    "duration": 15
                },
                {
                    "type": "audiogram",
                    "height": 400,
                    "color": "green",
                    "amplitude": 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 = 'hd';
$movie->quality = 'high';
$movie->draft = false;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->comment = 'Scene #1';
$scene1->addElement([
	'type' => 'audio',
	'src' => 'https://assets.json2video.com/assets/audios/mozart-kv525.mp3',
	'duration' => 15
]);
$scene1->addElement([
	'type' => 'audiogram',
	'height' => 400,
	'color' => 'green',
	'amplitude' => 10
]);
$movie->addScene($scene1);

// 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", "hd");
movie.set("quality", "high");
movie.set("draft", false);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("comment", "Scene #1");
scene1.addElement({
	"type": "audio",
	"src": "https://assets.json2video.com/assets/audios/mozart-kv525.mp3",
	"duration": 15
});
scene1.addElement({
	"type": "audiogram",
	"height": 400,
	"color": "green",
	"amplitude": 10
});
movie.addScene(scene1);

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

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

The resulting video is (unmute the player to hear the audio):

The video uses one scene with 2 elements:

The first element is a simple MP3 audio file
The second element is the audiogram

In this example, we are overlaying the audiogram at the top-left corner of the video (x=0, y=0 are the default values). The audiogram is set to 400px high, and a relative amplitude of 10.

Two color audiograms

You can overlay two audiograms on top of each other to create a more creative audiogram using different colors, opacities and amplitudes.

Example:

JSON
PHP
NodeJS

{
    "resolution": "hd",
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "comment": "Scene #1",
            "elements": [
                {
                    "type": "image",
                    "src": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wolfgang-amadeus-mozart_1.jpg/440px-Wolfgang-amadeus-mozart_1.jpg",
                    "position": "center-center"
                },
                {
                    "type": "audio",
                    "src": "https://assets.json2video.com/assets/audios/mozart-kv525.mp3",
                    "duration": 15
                },
                {
                    "type": "audiogram",
                    "y": 400,
                    "height": 300,
                    "color": "#f74f43",
                    "opacity": 0.6,
                    "amplitude": 10
                },
                {
                    "type": "audiogram",
                    "y": 400,
                    "height": 300,
                    "color": "white",
                    "opacity": 1,
                    "amplitude": 5
                }
            ]
        }
    ]
}

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 = 'hd';
$movie->quality = 'high';
$movie->draft = false;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->comment = 'Scene #1';
$scene1->addElement([
	'type' => 'image',
	'src' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wolfgang-amadeus-mozart_1.jpg/440px-Wolfgang-amadeus-mozart_1.jpg',
	'position' => 'center-center'
]);
$scene1->addElement([
	'type' => 'audio',
	'src' => 'https://assets.json2video.com/assets/audios/mozart-kv525.mp3',
	'duration' => 15
]);
$scene1->addElement([
	'type' => 'audiogram',
	'y' => 400,
	'height' => 300,
	'color' => '#f74f43',
	'opacity' => 0.6,
	'amplitude' => 10
]);
$scene1->addElement([
	'type' => 'audiogram',
	'y' => 400,
	'height' => 300,
	'color' => 'white',
	'opacity' => 1,
	'amplitude' => 5
]);
$movie->addScene($scene1);

// 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", "hd");
movie.set("quality", "high");
movie.set("draft", false);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("comment", "Scene #1");
scene1.addElement({
	"type": "image",
	"src": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wolfgang-amadeus-mozart_1.jpg/440px-Wolfgang-amadeus-mozart_1.jpg",
	"position": "center-center"
});
scene1.addElement({
	"type": "audio",
	"src": "https://assets.json2video.com/assets/audios/mozart-kv525.mp3",
	"duration": 15
});
scene1.addElement({
	"type": "audiogram",
	"y": 400,
	"height": 300,
	"color": "#f74f43",
	"opacity": 0.6,
	"amplitude": 10
});
scene1.addElement({
	"type": "audiogram",
	"y": 400,
	"height": 300,
	"color": "white",
	"opacity": 1,
	"amplitude": 5
});
movie.addScene(scene1);

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

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

The resulting video is:

This example uses two audiograms:

The first one is a light red with some transparency and an amplitude of 10
The second one, overlays the first one with a smaller amplitude and in white color

Other effects

You can also use other effects to create more creative audiograms, like cropping, fading, scaling or rotating. In the following video, we combine these effects to show how they work.

Example:

JSON
PHP
NodeJS

{
    "resolution": "hd",
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "comment": "Scene #1",
            "elements": [
                {
                    "type": "image",
                    "src": "https://images.pexels.com/photos/3944091/pexels-photo-3944091.jpeg",
                    "scale": {
                        "width": 1280,
                        "height": 720
                    },
                    "zoom": 5
                },
                {
                    "type": "audio",
                    "src": "https://json2video-test.s3.amazonaws.com/assets/audios/happy-music-01.mp3",
                    "duration": 15
                },
                {
                    "type": "audiogram",
                    "x": -640,
                    "height": 720,
                    "color": "#f74f43",
                    "opacity": 0.6,
                    "amplitude": 8,
                    "rotate": {
                        "angle": 90
                    }
                },
                {
                    "type": "audiogram",
                    "x": -640,
                    "height": 720,
                    "color": "yellow",
                    "opacity": 0.5,
                    "amplitude": 3,
                    "rotate": {
                        "angle": 90
                    }
                }
            ]
        }
    ]
}

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 = 'hd';
$movie->quality = 'high';
$movie->draft = false;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->comment = 'Scene #1';
$scene1->addElement([
	'type' => 'image',
	'src' => 'https://images.pexels.com/photos/3944091/pexels-photo-3944091.jpeg',
	'scale' => [
		'width' => 1280,
		'height' => 720
	],
	'zoom' => 5
]);
$scene1->addElement([
	'type' => 'audio',
	'src' => 'https://json2video-test.s3.amazonaws.com/assets/audios/happy-music-01.mp3',
	'duration' => 15
]);
$scene1->addElement([
	'type' => 'audiogram',
	'x' => -640,
	'height' => 720,
	'color' => '#f74f43',
	'opacity' => 0.6,
	'amplitude' => 8,
	'rotate' => [
		'angle' => 90
	]
]);
$scene1->addElement([
	'type' => 'audiogram',
	'x' => -640,
	'height' => 720,
	'color' => 'yellow',
	'opacity' => 0.5,
	'amplitude' => 3,
	'rotate' => [
		'angle' => 90
	]
]);
$movie->addScene($scene1);

// 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", "hd");
movie.set("quality", "high");
movie.set("draft", false);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("comment", "Scene #1");
scene1.addElement({
	"type": "image",
	"src": "https://images.pexels.com/photos/3944091/pexels-photo-3944091.jpeg",
	"scale": {
		"width": 1280,
		"height": 720
	},
	"zoom": 5
});
scene1.addElement({
	"type": "audio",
	"src": "https://json2video-test.s3.amazonaws.com/assets/audios/happy-music-01.mp3",
	"duration": 15
});
scene1.addElement({
	"type": "audiogram",
	"x": -640,
	"height": 720,
	"color": "#f74f43",
	"opacity": 0.6,
	"amplitude": 8,
	"rotate": {
		"angle": 90
	}
});
scene1.addElement({
	"type": "audiogram",
	"x": -640,
	"height": 720,
	"color": "yellow",
	"opacity": 0.5,
	"amplitude": 3,
	"rotate": {
		"angle": 90
	}
});
movie.addScene(scene1);

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

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

The resulting video is (unmute the player to hear the audio):

This example uses rotates the audiogram vertically and translates it to the left side.

Audiogram elements

← Documentation

Tutorial

Simple audiogram

Two color audiograms

Other effects