Berlin - Components | Audio

"Audio" component allows adding a mp3 audio file as a podcast.

Highlighted text is added within the screens by default (see here) and pop-ups (See here), but it can also be added inside other components (for example, a Pop-up, an Accordion, a Row, etc.).
You will find this component in the group of "Multimedia" components.

Setup process

1. Access the "Properties" tab, go to "Resource (.mp3)" and click on "Examine" to find and select the file from the unit Resources folder (see here).

2. Set up the rest of properties within the component.

3. Optionally, access the “Add” tab. From this tab, you can add a “Caption” to the audio file. This text will appear aligned to the audio when you use the “Audio icon” view.

Properties

PROPERTY

DESCRIPTION

Title

Audio title.

View

This property is used to choose how the audio player will be displayed:

  • Audio bar. Full audio player, including a progress bar.
  • Audio icon. Small player, including the Play/Pause button only . This view helps to add various audio files, as we can organise them in columns and rows. (See how to use rows here). Moreover, as we can use a text aligned with the audio, we can create layouts like this:

Resource

Audio file that will be displayed. We will click on "Examine" to access the unit Resources folder (check here), and select the audio we want to show. Only mp3 files are supported.

Alternative text

Text that describes the video. If the audio file does not load, this text will be displayed instead.

Activity details (Smart)

If we use a unit inside SmartClassroom, audios and videos have a bar that shows details of student activities (number of views, hotspots…). This option allows choosing to show or hide this details bar.

Vertical alignment

This property only works when the “Audio icon” view is applied. We can modify the position of the audio icon with respect to its text:

  • Up. The icon will be aligned with the first line of text.
  • Centre. The icon will be centered and shown vertically with respect to its text.

Width

This property is only available if the chosen type of "View" is "Big".
This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default, but size can be reduced to other preset percentages or changed to "full-size". Some quote styles may overlap the central column if "Full" width is chosen.

Align

This property is only available if the chosen type of "View" is "Big".
This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.

Float

It allows inserting a component and "wrap" it with a text.

  1. First, we should select a size percentage under 100% in "Width" property (25%, for instance).
  2. "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text).
  3. We use arrows to move the component and put it on the text. .