Sound

Audio waveform visualizer for video

Draw the sound over the picture: the audiogram look. In the TIMELINE's effects it draws the final mix, which is the usual place. On a track or a clip it draws that track's or that clip's own sound.

Shown on A narration over Ban Jelačić square in Zagreb

Before · the same request without it

After · The audiogram: the narration drawn as a moving line over the picture. On the timeline it draws the final mix.

Transcript

High above the city, on a tall column, stood the statue of the Happy Prince. He was gilded all over with thin leaves of fine gold.

The entry

Add it to a clip's effects list. Entries run in the order you write them.

{
  "type": "visualizer",
  "kind": "waveform",
  "color": "#34D399",
  "y": "80%",
  "width": "76%",
  "height": "20%"
}

Settings

Name	Accepts	Default	What it does
kind	waveform, spectrum	waveform	waveform is a moving line, spectrum is frequency bars that jump with the sound.
color	a color	#FFFFFF	Colour of the drawing, hex.
x	pixels, or a percent of the width	50%	Centre of the drawing, measured from the left edge.
y	pixels, or a percent of the height	77%	Centre of the drawing, measured from the top edge. The default sits it in the lower third.
width	pixels, or a percent of the width	88%	Width of the drawing.
height	pixels, or a percent of the height	38%	Height of the drawing.

Run it

The whole request behind the render above. Paste it as it is, or swap the file for your own.

TypeScript SDK cURL

import { createClient, outputUrl } from "@rendobar/sdk";

const rb = createClient({ apiKey: process.env.RENDOBAR_API_KEY });

const job = await rb.jobs.run({
  type: "compose",
  params: {
    schemaVersion: 1,
    output: {
      format: "mp4",
      resolution: {
        width: 960,
        height: 540
      }
    },
    timeline: {
      tracks: [
        {
          clips: [
            {
              asset: {
                type: "video",
                src: "https://cdn.rendobar.com/compose/showcase/media/narrated.mp4"
              },
              start: 0
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "text",
                text: "THE HAPPY PRINCE",
                style: {
                  font: "Inter",
                  size: 26,
                  weight: 800,
                  color: "#FFFFFF",
                  shadow: {}
                }
              },
              transform: {
                position: {
                  x: "50%",
                  y: "62%"
                }
              },
              start: 0,
              length: 10
            }
          ]
        }
      ],
      effects: [
        {
          type: "visualizer",
          kind: "waveform",
          color: "#34D399",
          y: "80%",
          width: "76%",
          height: "20%"
        }
      ]
    }
  },
});

console.log(outputUrl(job));

Install with npm i @rendobar/sdk. jobs.run() submits and waits, so it returns the finished job in one call.

curl https://api.rendobar.com/jobs \
  -H "Authorization: Bearer $RENDOBAR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"type":"compose","params":{"schemaVersion":1,"output":{"format":"mp4","resolution":{"width":960,"height":540}},"timeline":{"tracks":[{"clips":[{"asset":{"type":"video","src":"https://cdn.rendobar.com/compose/showcase/media/narrated.mp4"},"start":0}]},{"clips":[{"asset":{"type":"text","text":"THE HAPPY PRINCE","style":{"font":"Inter","size":26,"weight":800,"color":"#FFFFFF","shadow":{}}},"transform":{"position":{"x":"50%","y":"62%"}},"start":0,"length":10}]}],"effects":[{"type":"visualizer","kind":"waveform","color":"#34D399","y":"80%","width":"76%","height":"20%"}]}}}'

Returns immediately with a job id. Poll GET /jobs/{id} or register a webhook rather than blocking on the request.

Questions

What does the visualizer effect do in compose?

Draw the sound over the picture: the audiogram look. In the TIMELINE's effects it draws the final mix, which is the usual place. On a track or a clip it draws that track's or that clip's own sound. The audiogram: the narration drawn as a moving line over the picture. On the timeline it draws the final mix.

How do I add visualizer to a video with an API?

Send a compose job to the Rendobar API with this entry in the timeline: {"type":"visualizer","kind":"waveform","color":"#34D399","y":"80%","width":"76%","height":"20%"}. Add it to a clip's effects list. Entries run in the order you write them. The request on this page is complete and renders as shown.

What are the default settings for visualizer?

Every setting has a default, so the type on its own is enough: kind waveform, color #FFFFFF, x 50%, y 77%, width 88%, and height 38%. Set only the ones you want to change.