Create podcast video templates with waveforms

Audio waveforms are graphical representations of sound. One common use case of these audio waveforms is placing them on podcast videos. Often, when people want to convert podcast audio into a shareable video, they add a background graphics, text and also include the audio waveform. This adds a cool visual effect to the video and makes it more engaging.

If you run a podcast and promote it online using video, then it is likely you have this set up in a template. It is also quite likely that you would be releasing new episodes on a regular basis. Being able to automate this process would save you a lot of time and effort.

In this guide, you will learn how to add audio waveforms to a podcast video template using Shotstack.

About Shotstack and the Edit API

Shotstack is a cloud-based media platform that allows developers to automate video editing through its APIs. These APIs provide you with tools to create and edit dynamic videos at scale.

One of the APIs is the Edit API which we will use in this guide. It's a tool you can use to programmatically assemble video clips, and add transitions, overlays, and other effects.

Requirements

If you want to follow along with this guide, you will need the following:

• A Shotstack API Key. Get one when you sign up for a free account.
• Basic understanding of using the command line to run curl requests.

Gathering your dynamic assets

To get started, you need to get your dynamic assets ready to create the edit. The dynamic assets are media files that we can merge and replace in to the template which we will cover later. These dynamic assets include the podcast audio, the audio waveform video, and a guest headshot photo.

Podcast audio

We will use an excerpt from a finance podcast at the following URL:

https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/audio/financial-podcast.mp3

Audio waveform video

This is the wave form video generated from the above audio file. We created a guide on how to generate waveforms with FFmpeg to walk you through how we did it. The generated file was then uploaded and stored using our Ingest API at the following URL:

https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/msgtwx8iw6/zzy888nd-3crc-pl1e-xms7-0w47ek2kt5bi/source.mov

Guest headshot photo:

Our template will include a guest headshot photo. For this example, we're using a stock photo from Pexels , but you could include a real guest photo in your own template.

https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/business-man.jpg

Other dynamic elements include the Podcast title, which is just text. And the duration of the audio, which we need to know in advance, in this case it is 67.4 seconds.

Creating the podcast video template

The first step is to prepare the template. To save time, we've created a template using the Studio, our browser-based bulk video editor and exported the JSON.

To set up the template for use by the Edit API, create a text file and name it podcast.json. Then, copy and paste the following JSON to the file and click save:

{
    "timeline": {
        "fonts": [
            {
                "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-Regular.ttf"
            },
            {
                "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-Bold.ttf"
            },
            {
                "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-ExtraBold.ttf"
            }
        ],
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "width": 450,
                            "height": 100,
                            "position": "center",
                            "html": "<p data-html-type=\"text\">The Finance Podcast</p>",
                            "css": "p { font-family: 'Open Sans'; color: #ffffff; font-size: 32px; text-align: center; }"
                        },
                        "start": 0,
                        "length": "{{ DURATION }}",
                        "offset": {
                            "y": 0.222
                        },
                        "transition": {
                            "in": "slideRight"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "width": 571,
                            "height": 242,
                            "position": "top",
                            "html": "<p data-html-type=\"text\">{{ TITLE }}</p>",
                            "css": "p { font-family: 'Open Sans ExtraBold'; color: #d1ba8f; font-size: 46px; text-align: center; }"
                        },
                        "start": 0,
                        "length": "{{ DURATION }}",
                        "offset": {
                            "x": -0.006,
                            "y": 0.108
                        },
                        "transition": {
                            "in": "slideLeft"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "luma",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/luma-mattes/circle.jpg"
                        },
                        "start": 0,
                        "length": "{{ DURATION }}",
                        "offset": {
                            "x": -0.1
                        },
                        "transition": {
                            "in": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "image",
                            "src": "{{ IMAGE }}"
                        },
                        "start": 0,
                        "length": "{{ DURATION }}",
                        "fit": "none",
                        "scale": 0.529,
                        "offset": {
                            "y": -0.126
                        },
                        "transition": {
                            "in": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "{{ WAVEFORM }}"
                        },
                        "start": 0,
                        "length": "{{ DURATION }}",
                        "offset": {
                            "y": -0.334
                        },
                        "fit": "contain"
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/logos/corporate-colour.png"
                        },
                        "start": 0,
                        "length": "{{ DURATION }}",
                        "fit": "none",
                        "offset": {
                            "x": 0.011,
                            "y": 0.357
                        },
                        "transition": {
                            "in": "fade"
                        },
                        "scale": 0.5
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/financial-background.jpg"
                        },
                        "start": 0,
                        "length": "{{ DURATION }}",
                        "effect": "slideUpFast"
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "audio",
                            "src": "{{ AUDIO }}",
                            "volume": 1
                        },
                        "start": 0,
                        "length": "{{ DURATION }}"
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "size": {
            "width": 720,
            "height": 1280
        }
    },
    "merge": [
        {
            "find": "TITLE",
            "replace": "An Interview with Ethan Sterling, Head of APAC Derivatives"
        },
        {
            "find": "IMAGE",
            "replace": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/business-man.jpg"
        },
        {
            "find": "WAVEFORM",
            "replace": "https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/msgtwx8iw6/zzy888nd-3crc-pl1e-xms7-0w47ek2kt5bi/source.mov"
        },
        {
            "find": "AUDIO",
            "replace": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/audio/financial-podcast.mp3"
        },
        {
            "find": "DURATION",
            "replace": "67.4"
        }
    ]
}

The JSON template includes three main key-value pairs.

• Timeline: the actual edit for the podcast video with the assets, text and timings.
• Output: preferences for the output video with format and size.
• Merge fields: the dynamic elements in the template like the podcast audio, waveform, and image.

The merge fields here allow you to dynamically replace content in the template including the title, guest speaker, audio and our waveform. We set the duration to match the length of the audio file, which is also the same as the waveform file. That ensures that everything displays while the audio and waveform play.

You can also save the JSON as a template via the Studio panel on the dashboard. That way, you need only use the template ID and the merge fields when sending the POST request. More on that later in the article.

Rendering the video using the Edit API

Next, we want to send the template for rendering in to an MP4 video. Send a POST request to the Edit API's render endpoint using the curl command below. Be sure to replace SHOTSTACK_API_KEY with your API key.

curl -X POST \
    -H "Content-Type: application/json" \
    -H "x-api-key: SHOTSTACK_API_KEY" \
    -d @podcast.json \
    https://api.shotstack.io/stage/render

The response you will get from the API is JSON data with a response.id value like the following.

{
  "success": true,
  "message": "Created",
  "response": {
    "message": "Render Successfully Queued",
    "id": "6c1743ab-be02-4834-a62e-ff437a9530e1"
  }
}

Get the video render status

Copy the value of render.id from the previous response. Make a GET request to the render endpoint using the command below. Paste in your API key and replace RENDER_ID with the value you copied.

curl -X GET \
  -H "Content-Type: application/json" \
  -H "x-api-key: SHOTSTACT_API_KEY" \
  https://api.shotstack.io/stage/render/RESPONSE_ID

The response from the API will include a response.status value. If the value is not done, it means the rendering is not yet complete. Wait a few seconds and make the GET request again. If it's done, you will get a response similar to below.

{
  "success": true,
  "message": "OK",
  "response": {
    "id": "6c1743ab-be02-4834-a62e-ff437a9530e1",
    "owner": "3zq6g23nf6",
    "plan": "sandbox",
    "status": "done",
    "error": "",
    "duration": 67.4,
    "billable": 67.4,
    "renderTime": 29826,
    "url": "https://shotstack-api-stage-output.s3-ap-southeast-2.amazonaws.com/3zq6g23nf6/6c1743ab-be02-4834-a62e-ff437a9530e1.mp4",
    "poster": null,
    "thumbnail": null,
    "created": "2024-04-15T04:14:38.648Z",
    "updated": "2024-04-15T04:15:12.640Z"
  }
}

If the status is done, you will see a response.url value. This value points to the URL of the final rendered video. You can open and view it in your browser or download it.

Using the template ID

As mentioned earlier, you can also save the template and use the template ID when sending the POST request to the API. When you use the template ID, you need only add the merge fields when making the POST request.

Below is a walkthrough of how to create and use templates.

1. Login to the Shotstack dashboard
2. Select the Studio panel from the menu on the left.
3. Click the Create Blank Template button.
4. The New Template modal should appear. Enter a name for the template, select Video as the output, and click Done.
5. Click the JSON VIEW toggle (at the bottom left corner of the editing window) to open the JSON editor.
6. Copy and paste the content of the podcast.json file we used earlier.
7. Toggle off the JSON VIEW. You should now see a preview of the video in the editor and the timeline.
8. Click the Save button in the top left corner next to the template name.
9. Click Use Template in the top right corner and choose API from the modal.
10. A Code Snippet panel will appear on the right of your screen.
11. Choose cURL from the LANGUAGE/LIBRARY dropdown and Template ID from the DATA FORMAT dropdown.
12. Click Copy to copy the curl command.

Render the video using the template ID

The code snippet you copied from the previous step will include your Shotstack API key, the template id, and the merge fields. It's going to look like the one below.

curl --request POST 'https://api.shotstack.io/stage/templates/render' \
--header 'content-type: application/json' \
--header 'x-api-key: SHOTSTACK_API_KEY' \
--data-raw '{
  "id": "2f6b689c-3dc7-4963-8d7e-addb2fcb778b",
  "merge": [
    {
      "find": "TITLE",
      "replace": "An Interview with Ethan Sterling, Head of APAC Derivatives"
    },
    {
      "find": "IMAGE",
      "replace": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/business-man.jpg"
    },
    {
      "find": "WAVEFORM",
      "replace": "https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/msgtwx8iw6/zzy888nd-3crc-pl1e-xms7-0w47ek2kt5bi/source.mov"
    },
    {
      "find": "AUDIO",
      "replace": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/audio/financial-podcast.mp3"
    },
    {
      "find": "DURATION",
      "replace": "67.4"
    }
  ]
}'

Run the above command and you will get a JSON response like the following:

{
  "success": true,
  "message": "Created",
  "response": {
    "message": "Render Successfully Queued",
    "id": "b1166022-6f21-49fe-af61-5c65643d5507"
  }
}

You can now follow the same process we used earlier. Check the render status of the edit. If the status is done, you can use the RENDER_ID to get details of the final video. This will include the URL which you can use to view the video in your browser or download it.

Conclusion

Adding audio waveforms to podcast videos is certainly one way to make it more aesthetic and engaging. In this article, you learned how to do that using the Shotstack Edit API. We covered using both the JSON edit and a template ID. By using a template for your promotional podcast videos you can quickly and easily generate videos on a regular basis. You could also build out a service that lets other podcast creators generate videos from a library of templates. To learn more about what is possible with Shotstack have a look at our developer guides.