Audiograms#

An audiogram is a video that visualises an audio file as animated bars (or a waveform line) on top of a static or animated background. It is the standard format used to share podcast snippets, voice clips, and other audio-first content on platforms that require video.

JSON2Video has a first-class audiogram element that draws animated bars synchronised to any audio source. You can combine it with images, text, and subtitles to build a complete share-ready video.

Minimum audiogram#

The smallest possible audiogram needs an audio source and an audiogram element:

{
  "resolution": "instagram-story",
  "scenes": [
    {
      "elements": [
        { "type": "audio", "src": "https://example.com/clip.mp3" },
        { "type": "audiogram" }
      ]
    }
  ]
}

With no other property the audiogram draws white rounded bars in the centre of the canvas. They follow the voice and rest as a row of dots in silence.

The audiogram element does not own an audio source — it visualises whatever audio is playing in the scene. Add one audio element (file, podcast clip…) or one voice element (text-to-speech) and the audiogram tracks it automatically.

Common pattern: podcast share clip#

A typical share clip combines:

• A vertical 1080×1920 (9:16) or square 1080×1080 frame.
• A still cover image (album art, episode artwork).
• The host name or episode title as text.
• The audiogram element overlaid on top.
• Automatic subtitles for accessibility.

{
  "resolution": "instagram-story",
  "scenes": [
    {
      "elements": [
        { "type": "image", "src": "https://example.com/cover.jpg", "zoom": 1 },
        { "type": "audio", "src": "https://example.com/episode-clip.mp3" },
        {
          "type": "text",
          "text": "Episode 42 — Building in public",
          "y": 100,
          "style": "002",
          "settings": { "font-size": "70px", "color": "white" }
        },
        {
          "type": "audiogram",
          "color": "#FF6B00",
          "amplitude": 6,
          "width": 800,
          "height": 300,
          "position": "bottom-center"
        },
        {
          "type": "subtitles",
          "settings": { "style": "classic", "position": "bottom-center" }
        }
      ]
    }
  ]
}

Customising the look#

The audiogram element accepts:

• style — bars (default) or line. See below.
• color — hex colour. White by default for bars.
• opacity — from 0 to 1. Bars are fully opaque by default.
• amplitude — how much the audiogram reacts to the audio (default 5).
• width, height — size of the box the bars fill. With neither set, the bars take 68% of the canvas width.
• position, or x and y — where the box sits (same coordinate system as every other element). With no size, the bars are centred on every axis you do not place.

Bars or line#

style picks the look. bars is the default:

{ "type": "audiogram", "style": "bars", "color": "#FFFFFF" }

line draws a thin waveform line across the element. It was the only look before the style property existed, so add "style": "line" to keep it in a movie you made earlier:

{ "type": "audiogram", "style": "line", "color": "#FF0000", "opacity": 0.5 }

For the full property list, see the audiogram element reference.

See also#

• Audiogram example with full JSON
• Automatic subtitles example
• Audio element reference