Vienna - Components | Audio

Last modified:

The "Audio" component allows you to add an mp3 audio file, as a podcast.

We will find this component in the "Multimedia" component group.

Image 20380

Configuration process

1. Go to the "Properties" tab and, in the "View" property select the desired appearance for the component: Large or Small.

Image 20381

2. In the "Resource (.mp3)"property, select "Browse" to locate the desired file in the Drive Resources folder (see here).

2. Configure the other properties of the component.

3. Optionally, go to the "Add"tab. From there, you can add a "Photo Footer".


TitleAudio title.

Lets you decide what the audio player will look like:

  • Big one. Full player, with progress bar and duration indication.Image 5783
  • Little one. Reduced version, where we only have the Play/Pause Image 5784 button.
    In this view, we can add a Caption, which will look like this:
    Image 20382
    Additionally, using the "Float"property, you can align with the text
    Image 20383
AppearanceAllows you to customize the appearance of the player:
- Standard:
Applies the colors defined in the common properties for the buttons.
- Custom:
Allows you to apply a custom color to the player.
ResourceThe audio file to be displayed. Click "Browse" to access the Drive Resources folder (see here) and select the searched audio. Only files in mp3 format are supported.
Alternative textDescriptive text of the audio. In case the audio does not load, this text will be displayed instead.
Vertical alignProperty only available with "View" of type "Small".
Allow you to aling the audio icon on the top of the photo footer or in the middle. 

Image 20391


Property only available with "View" of type "Big".

Allows you to modify the space occupied by the component within the central content column. By default, it takes up 100% of the available space, but can be reduced using other predefined percentages or can be arranged to "full-size". In some dating styles, the "Full" size causes the size to exceed the width of the center column.


Property only available with "View" of type "Big".

Places the right-aligned, left, or center-aligned component in the center column of contents. It only takes effect when we apply a "Width" less than 100%.


Property only available with "View" of type "Big".

Allows the component to be "framed" around a text.

Image 5787

  1. First, in the "Width"property, we mark a size less than 100% (for example, 25%).
  2. In the "Float" property we decide in what position we want the component to float (to the left or right of the text).
  3. Move the component with its arrows to place it over the text.Image 5788
Block fast forwardOnly available in the "Big"view. It allows you to decide whether the user will be able to move forward or backward freely through the audio or whether the playback will be automatic and will not be able to interact with it.

Is this article helpful for you?
© 2023 Netex Knowledge Factory. All Rights Reserved. Disclaimer | Privacy policy | Cookie Policy.