Audio Component

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 provides examples of Audio component configurations.

Component overview

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

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

Component set up

Follow these steps to add the Audio component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Audio component.
3. Click the Card Drop component and select Add Left, Add Full or Add Right.

Click the Edit Component icon on the newly added Audio component to begin set up.

General & Behaviour 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 Behaviour section:

The Audio component can be set up to display each file one after the other in rows, or in the Behaviour 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.

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

Each Item

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.

Heads up!

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 Behaviour 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

FAQs

Can I change the theming/styling of the audio control bar?
No, this is not possible due to the audio player used within Evolve.

Did this article help?

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