How to embed audio

Applies to: T4 Site Manager, Plone, Zope
Last updated: 26/02/2015
Summary: How to embed audio files on to a web page.

Before you start

  • These instructions require basic knowledge of HTML.
  • Any audio files you want to embed must be hosted in an Apache media folder.
  • Audio files must be in .mp3 format with a web-safe filename (ie no capital letters, spaces or special characters; use hyphens to separate words).
  • You must have permission from the owner of the audio recording.

Implementation

Add a hyperlink to your audio file. The link must be added to a new paragraph, rather than alongside other text.

If you add multiple audio files, each link must be in a separate paragraph.

Once the script is activated (see below), all links to .mp3 files will be automatically styled. If you have audio links on the page that should not be styled, add class="noPlayback" to the <a> tag.

Activation

Once you have added the link(s), fill out the form so that we can activate the styling:


Examples

Stock music one

Stock music two

Stock music one without styling

<p><a href="
http://www.bristol.ac.uk/university/media/style-guide/audio/innovation.mp3">Stock music one</a></p>
<p><a href="
http://www.bristol.ac.uk/university/media/style-guide/audio/go-travel.mp3">Stock music two</a></p>
<p><a href="http://www.bristol.ac.uk/university/media/style-guide/audio/innovation.mp3" class="noPlayback">Stock music one</a> without styling</p>

Note: this script does not 'stream' the audio. Instead it provides styling that allows the user to play the audio as it is downloading to their computer.

Other audio platforms

If you regularly record audio with the intention of including it on your web pages, consider using a free service such as SoundCloud, which can host your files and allows you to easily stream the audio on your website.

Always check the terms of use and privacy policies before using a third party service.