Customer Success Center

Login Sign up

Components | Audio

Modified on: Wed, 13 Dec 2023 5:27 PM

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

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



Configuration process

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



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

3. Configure the other properties of the component.

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

Properties

PROPERTY DESCRIPTION
Title Audio title.
View

Lets you decide what the audio player will look like:

  •  Big one.  Full player, with progress bar and duration indication.

  •  Little one.  Reduced version, where we only have the Play/Pause  button.
    In this view, we can add a Caption, which will look like this:



    Additionally, using the "Float"property, you can align with the text
Appearance Allows 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.
Resource The 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 text Descriptive text of the audio. In case the audio does not load, this text will be displayed instead.
Vertical align Property 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.
Width

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.
Align

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%.
Float

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

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



  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.
Block fast forward Only 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.
Was this answer helpful?