Element: Audio

This element is an audio player that plays .aac, .aiff, .m4a, .mp3, .mpeg3, .mpg, .mpeg, and .wav files..
The element (1) includes three elements that can be customized in position and size:
2: Start & Stop button to start/stop the audio file.
3: Play time - shows the played time.
4: Remaining time - shows the remaining time.

Sample App

You can test this element with sample styles directly in the public area of the contentDock® Viewer App. You can also load these sample styles from the Template Library into your user account and import them into your app project.

Styles

  • Background
    Color
    Contentdock color help
    Defines the color of the element background. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Image
    Contentdock background image help
    Defines the background image for the element. The image is scaled in the element.
  • Border
    Height
    Contentdock audio border height help
    Defines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock audio border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the element border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Position
    Contentdock audio border position help
    Specify the position of the border. The border always encloses the element, but you can choose in which direction the border will be drawn.

    Possible values are:

    Inside: The border is drawn inside.

    Outside: The border is drawn outside.

    Preset system value

    This value is used if no style is defined for this element.

    inner

Audio Play & Pause button (sub element)

  • Background
    Color
    Contentdock color help
    This defines the background color of the button.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

  • Border
    Height
    Contentdock audio play button border height help
    Defines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock audio play button border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the element border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Position
    Contentdock audio play button border position help
    Specify the position of the border. The border always encloses the element, but you can choose in which direction the border will be drawn.

    Possible values are:

    Inside: The border is drawn inside.

    Outside: The border is drawn outside.

    Preset system value

    This value is used if no style is defined for this element.

    inner

  • Button behavior
    Normal image
    Contentdock audio start stop button help
    Defines the image for the start button of the audio player.

    Preset system value

    This value is used if no style is defined for this element.

    Vqfjgdlk

    Down image
    Contentdock audio start stop button help
    Defines the image for the stop button of the audio player.

    Preset system value

    This value is used if no style is defined for this element.

    Mkncezlj

    Color for the pressed state
    Contentdock color help
    This defines the background color for the touched / pressed state of the button

    Attention: This style has no effect, when a background image is defined for the touched / pressed state.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

Audio Play time (sub element)

  • Background
    Color
    Contentdock color help
    Defines the color of the element background. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

  • Border
    Height
    Contentdock audio play time border height help
    Defines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock audio play time border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the element border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Position
    Contentdock audio play time border position help
    Specify the position of the border. The border always encloses the element, but you can choose in which direction the border will be drawn.

    Possible values are:

    Inside: The border is drawn inside.

    Outside: The border is drawn outside.

    Preset system value

    This value is used if no style is defined for this element.

    inner

  • Inner Space
    At the top
    Contentdock audio play time padding top help
    The text in the element is centered vertically and is aligned horizontally on the left by default. You can change the space between the text and the top border of the element in this style.

    Preset system value

    This value is used if no style is defined for this element.

    0

    At the bottom
    Contentdock audio play time padding bottom help
    The text in the element is centered vertically and is aligned horizontally on the left by default. You can change the space between the text and the bottom border of the element in this style.

    Preset system value

    This value is used if no style is defined for this element.

    0

    To the left
    Contentdock audio play time padding left help
    The text in the element is centered vertically and is aligned horizontally on the left by default. You can change the space between the text and the left border of the element in this style.

    Attention: Please note that this style is only possible when the text alignment "left" is used. If the text alignment is "right" or "center," this value has no effect.

    Preset system value

    This value is used if no style is defined for this element.

    0

    To the right
    Contentdock audio play time padding right help
    The text in the element is centered vertically and is aligned horizontally on the left by default. You can change the space between the text and the right border of the element in this style.

    Attention: Please note that this style is only possible when the text alignment "right" is used. If the text alignment is "left" or "center," this value has no effect.

    Preset system value

    This value is used if no style is defined for this element.

    0

  • Title Font
    Name of the font
    Contentdock font family help
    In contentDock® there are various fonts from fonts.google.com pre installed. You can also load your own fonts in contentDock® as TTF (TrueType Font) or OTF (OpenType Font).

    Preset system value

    This value is used if no style is defined for this element.

    Open Sans Light

    Font size
    Contentdock font size help
    Defines the size of the text in pixels. The value is selected from the dropdown or can be set individually.

    Preset system value

    This value is used if no style is defined for this element.

    16

    Color
    Contentdock color help
    Defines the color of the text. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #000000

  • Alignment
    Alignment
    Contentdock text align help
    Defines the general alignment of the text within the element.

    Possible values are:

    left: The text is left aligned.

    right: The text is right aligned.

    center: The text is centered in the element.

    Attention: Please note that some styles of the inner distance (inner space) are not used depending on the text alignment.

    Preset system value

    This value is used if no style is defined for this element.

    left

Audio Remaining time (sub element)

  • Background
    Color
    Contentdock color help
    Defines the color of the element background. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

  • Border
    Height
    Contentdock audio rest time border height help
    Defines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock audio rest time border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the element border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Position
    Contentdock audio rest time border position help
    Specify the position of the border. The border always encloses the element, but you can choose in which direction the border will be drawn.

    Possible values are:

    Inside: The border is drawn inside.

    Outside: The border is drawn outside.

    Preset system value

    This value is used if no style is defined for this element.

    inner

  • Inner Space
    At the top
    Contentdock audio rest time padding top help
    The text in the element is centered vertically and is aligned horizontally on the left by default. You can change the space between the text and the top border of the element in this style.

    Preset system value

    This value is used if no style is defined for this element.

    0

    At the bottom
    Contentdock audio rest time padding bottom help
    The text in the element is centered vertically and is aligned horizontally on the left by default. You can change the space between the text and the bottom border of the element in this style.

    Preset system value

    This value is used if no style is defined for this element.

    0

    To the left
    Contentdock audio rest time padding left help
    The text in the element is centered vertically and is aligned horizontally on the left by default. You can change the space between the text and the left border of the element in this style.

    Attention: Please note that this style is only possible when the text alignment "left" is used. If the text alignment is "right" or "center," this value has no effect.

    Preset system value

    This value is used if no style is defined for this element.

    0

    To the right
    Contentdock audio rest time padding right help
    The text in the element is centered vertically and is aligned horizontally on the left by default. You can change the space between the text and the right border of the element in this style.

    Attention: Please note that this style is only possible when the text alignment "right" is used. If the text alignment is "left" or "center," this value has no effect.

    Preset system value

    This value is used if no style is defined for this element.

    0

  • Title Font
    Name of the font
    Contentdock font family help
    In contentDock® there are various fonts from fonts.google.com pre installed. You can also load your own fonts in contentDock® as TTF (TrueType Font) or OTF (OpenType Font).

    Preset system value

    This value is used if no style is defined for this element.

    Open Sans Light

    Font size
    Contentdock font size help
    Defines the size of the text in pixels. The value is selected from the dropdown or can be set individually.

    Preset system value

    This value is used if no style is defined for this element.

    16

    Color
    Contentdock color help
    Defines the color of the text. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    #ff0000

  • Alignment
    Alignment
    Contentdock text align help
    Defines the general alignment of the text within the element.

    Possible values are:

    left: The text is left aligned.

    right: The text is right aligned.

    center: The text is centered in the element.

    Attention: Please note that some styles of the inner distance (inner space) are not used depending on the text alignment.

    Preset system value

    This value is used if no style is defined for this element.

    left