Skip to main content Skip to navigation

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.

  1. Make a copy of your audio file and rename it, changing the file extension from .mp3 to .mp4.
  2. 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.
  3. 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.

  4. Download the captions file.
  5. Use the Microsoft Stream transcript VTT file cleaner to convert the captions file into the basis for a transcript.
  6. Edit the resulting text to correct errors, specify who is speaking and describe meaningful non-speech audio.
  7. 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.

  1. Go to the page where you want to add an audio clip.
  2. Optionally, upload the audio file before editing the page.
  3. Edit the page with the Components Editor.
  4. Place your cursor in the page where you want to insert the audio clip.
  5. In the left-hand menu, select Add images, media, files and carousels > Audio/video.
  6. 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.
  7. 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.
  8. Select Add media file.
  9. To change any of the above, select the audio clip component, then in the toolbar that appears above it, select Settings.
  10. You can reposition your audio clip as necessary.
  11. When you've finished editing your page, select Publish.

  12. 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:

    1. Play / pause
    2. Stop
    3. Skip backwards or forwards (5 seconds at a time)

Add an audio clip to a web page using the old visual editor

  1. Go to the page where you want to add an audio clip.
  2. Optionally, upload the audio file before editing the page.
  3. Edit the page with the old visual editor.
  4. Place your cursor in the page where you want to insert the audio clip.
  5. In the toolbar, select Insert a > Audio.
  6. 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.
  7. Leave the Type drop-down list set to Detect automatically.
  8. Optionally, select the checkbox to Provide a download link.
  9. Select Insert. You should now see code similar to the following in your page:

    [media download=true]yourfile.mp3[/media]
  10. 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:

    Download

Related articles

Support

Email webteam at warwick dot ac dot uk
How to report a problem