Add a podcast or audio

Audio uploaded directly to the CMS via the media library will not play on SDP websites as it is no longer supported.

To provide audio on your web pages, you need to upload it to a third party podcast platform and then embed a link. Follow the instructions below.

These instructions describe how to add audio and podcasts to an SDP web page.

Your podcast provider needs to be added to our security list ('white list or CSP) before you go live. You can request this via a service desk ticket.

We currently have the following providers enabled:

  • Libsyn

  • Soundcloud

  • Acast

Accessibility requirements for audio files

All audio files need to include a transcript. The transcript must be HTML (not an attached document) and should include:

  • the title

  • producer of the content

  • the name of each speaker before their speech

  • all speech content

  • any relevant non-speech audio

  • an indication of the end of the transcript.

Transcripts do not need to include timestamps. In many cases, including timestamps would be unnecessary clutter.

The transcript text should be added into the body content of your page, under the embedded audio file or podcast (either in a basic text component or in an accordion if lengthy). 

To embed a podcast

Go to the podcast's original location. Here's a screenshot of one of the Shrine of Remembrance's podcasts on Libsyn. 

Look for the 'code' symbol (highlighted in yellow above) and click on it. You'll see an iframe style code that looks like this:

This iframe code contains information about how to display the podcast. Our CMS overrides some of the style instructions, including border and width, but we do need to note the height instruction – in this example, it's '90'.

Copy the text that starts with "src=" including the double quotation marks. You may have to copy the entire bit of code and then paste it into Word or Notepad in order to copy just the bit you want.

Now go to the page in the CMS where you want to embed the podcast and find the section where you'd like to put it. This needs to be a basic text or accordion component. 

Click the globe icon (next to the Media button) and you'll get a pop-up window. 

On the Create embedded content popup window, you click the dropdown and select IFrame

Now you’ll see fields to add your iframe details.

Title: To ensure we're meeting our accessibility requirements, you will also need to add a title element to the iframe code at the very start, for example: <iframe title="Meet the Rats (rerelease)" src="//html5-player.libsyn..."></iframe>. It's best to have this be identical to the title of what you're embedding.

URL: Paste the code you copied earlier into the URL field.

Width and height: Type in the height and width, click Submit and save the page.

Published example

Here's what this Shrine podcast looks like on a published page:

See an example of an audio transcript.Â