Instructions on how to add audio and podcasts to a page.
We can embed audio and podcasts onto a page as long as the podcast provider has been added to our security list.
We currently have the following websites enabled:
Libsyn
Soundcloud
Acast
If you want to embed podcasts from another provider, you'll need to log a service desk ticket with the URL, asking to add it to the CSP list.
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 called IFrame Properties.
Paste the code into the URL field.
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.
Type in the height (in this example it's 90) into that field, click OK 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.