Audio Component

This component is suitable for use when creating accessible courses.

The Audio component lets you play mp3 audio files to your learner, either internally within the course or from an external source. It is great for playing interviews, scenario voice files, or anything to add a further dimension and engage more of the user's senses.

This article provides an overview of the Audio component, component setup and behavior, and examples of Audio component configurations.

Component overview

The Audio component lets you add a Title, Display Title, Instruction text, and/or label. You may also add one or more audio files in a row or column layout.

The Audio component is a fully responsive and interactive component that works across different browsers, tablets, and smartphones.

Component Set up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customise set-up.

Or click anywhere on an existing component to open the Property Panel.

General & Behavior sections

In the General section:

1. Give your component a distinct Title and a Display Title, if needed. Display Title is seen by learners.
2. Add body text if required.
3. Instruction Text that tells users how to use the component.
4. Include an Aria Label for screen readers, as needed. Suggested Aria Label: 'This component contains one or more pieces of audio content. Use the player controls to play and pause the audio as required.'

Add an interaction label if required.

In the Behavior section:

The Audio component can be set up to display each file one after the other in rows or, in the Behavior section, you can turn on a column view.

By default, the items are displayed in rows. Turn on the column layout setting which allows you to select how many items are displayed next to each other before starting a new row.

Each Item

You can add a new item for each audio file you wish to have displayed in this component.

Add your first or subsequent item using the Add Audio Item button.

For Each Item

If the item is an External file:

1. Turn on the External audio toggle.
2. Paste the URL for the audio file into the box that appears. Make sure to link directly to an mp3 file.

If you will be uploading the mp3 file:

1. Select the plus symbol inside the Audio in mp3 format box.
2. Select an existing mp3 file from the Asset Library or upload one directly from your computer.

For all files:

If you wish to display an image that the learner uses to play the audio file, instead of the audio control bar, add this in the Poster Image box and remember to add Alt Text.

Note: By default, audio items that have a poster image will have the controls hidden which means the learner cannot pause or control playback of the audio. To change this, visit Behavior and turn on Enable Controls? which will add the controls underneath the poster image.

Add any Transcript Text including a label for the Transcript Button.

Finally, choose if the component will complete by either:

• Inview - The component only has to be seen on screen.
• Play - The audio file must have been at least started.
• Ended - The audio file must have been played right through to the end.

Component Examples

Note: The theming and styling of the audio control bar cannot be edited at this time.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.