Audio clips
You can embed audio clips in SiteBuilder pages. We recommend you use the .mp3 format for audio as it's compatible with the majority of browsers and devices.
Important: accessibility legislation dictates that for audio content published from 23 September 2020 on the Warwick website, you must provide:
- A transcript containing what is said, who is speaking and non-speech information conveyed through sound.
This applies unless the audio is an alternative for text, and labelled as such. You should also provide a transcript if you make changes to a page containing audio that was published before 23 September 2020.
In this article:
Create a transcript
A transcript is a separate text version of speech and non-speech audio information needed to understand the content. It includes what is said, who is speaking and non-speech information conveyed through sound, such as meaningful sound effects.
If your audio clip is in the .mp3 format, you can create the basis for your transcript automatically.
- Make a copy of your audio file and rename it, changing the file extension from .mp3 to .mp4.
- Go to Microsoft Stream. You can get there by going to your Warwick email account in a web browser (there’s a link on Insite), selecting the square of 9 dots in the top left, then All apps > Stream.
-
Follow Microsoft's instructions to generate automatic captions. This is intended for video files, but changing the file extension of your audio file to .mp4 makes Stream treat it as a video. You do not need to publish the file for Stream to generate captions.
- Download the captions file.
- Use the Microsoft Stream transcript VTT file cleaner to convert the captions file into the basis for a transcript.
- Edit the resulting text to correct errors, specify who is speaking and describe meaningful non-speech audio.
- Add the transcript text, or a link to it, beneath the audio clip on the web page.
Add an audio clip to a web page using the Components Editor
The Components Editor is an evolution of the old visual editor, for editing the content of web pages within SiteBuilder.
- Go to the page where you want to add an audio clip.
- Optionally, upload the audio file before editing the page.
- Edit the page with the Components Editor.
- Place your cursor in the page where you want to insert the audio clip.
- In the left-hand menu, select Add images, media, files and carousels > Audio/video.
- In the Add or change a media file (video or audio) popup, specify the audio file to use by doing one of the following:
- Select the magnifying glass icon next to the Media file URL box to specify an audio file that's already uploaded to your website.
- Drag and drop the audio file from your computer into the dotted-line box.
- Select Browse in the dotted-line box to find the audio file on your computer and upload it.
- Select an audio file under Recently uploaded files, if any are present.
- Optionally:
- Align the audio clip component - by default, your audio clip appears on the left, with no other content next to it. You can use the Align dropdown to choose:
- Left - the audio clip component is left-aligned and you can position other content to the right of it.
- Right - the audio clip component is right-aligned and you can position other content to the left of it.
- Select the checkbox to Provide a link to download the file.
- Align the audio clip component - by default, your audio clip appears on the left, with no other content next to it. You can use the Align dropdown to choose:
- Select Add media file.
- To change any of the above, select the audio clip component, then in the toolbar that appears above it, select Settings.
- You can reposition your audio clip as necessary.
-
When you've finished editing your page, select Publish.
-
Visitors to your page can listen to the audio by using the following buttons, which appear to the left of the current timecode for the clip:
- Play / pause
- Stop
- Skip backwards or forwards (5 seconds at a time)
Add an audio clip to a web page using the old visual editor
- Go to the page where you want to add an audio clip.
- Optionally, upload the audio file before editing the page.
- Edit the page with the old visual editor.
- Place your cursor in the page where you want to insert the audio clip.
- In the toolbar, select Insert a > Audio.
- Enter the audio file's path in the URL of audio file box – you can use the picker to browse to the audio file you uploaded in step two.
- Leave the Type drop-down list set to Detect automatically.
- Optionally, select the checkbox to Provide a download link.
-
Select Insert. You should now see code similar to the following in your page:
[media download=true]yourfile.mp3[/media]
-
When you've finished editing your page, select Publish. Visitors to your page can listen to the audio by selecting the play button, similar to this: