Home/Documentation/Builder/Elements/Design Elements/

Audio Element

Last Update: February 15, 2023

The Audio Element offers the ability for users to add self-hosted audio clips easily and stylishly to your Avada websites. Read below for details on all Element options, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Audio Element

The Audio Element is easy to add anywhere in your content. Just add the Element to any column.

Adding your audio file in the first option, Audio. You can either select one already in the media library, or you can upload one. This element uses a HTML5 tag, and so supports all major audio formats, including .mp3, .wav, & .m4a.

Once you have added your audio file, continue configuring the element with your preferred styling options. This element can also be styled in conjunction with the containing column. Read below for a detailed description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Audio. Also, please note that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
AudioUpload an audio file.
LoopTurn on to loop the media.
AutoplayTurn on to autoplay the media.
PreloadSpecifies if and how the audio should be loaded when the page loads. Defaults to "None".• "None": The audio should not be loaded when the page loads.• "Auto": The audio should be loaded entirely when the page loads.• "Metadata": Only metadata should be loaded when the page loads..
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Background ColorControls the background color for the audio player. Leave empty for default value of Dark. Reset to default.Using default value.
Controls Color SchemeDepending on the background color you can change this value to "Light" or "Dark" to ensure controls are visible. Default currently set to Light.
Audio Progress ColorSelect a color for the audio progress-bar. Leave empty for default value of White. Reset to default.Using default value.
Maximum WidthSet the maximum width using a valid CSS value. Default currently set to 100%.
Border SizeSet the border size. In pixels. Default currently set to 0. Reset to default.Using default value.
Border ColorControls the border color for the audio player. Leave empty for default value of White. Reset to default.Using default value.
Border RadiusEnter values including any valid CSS unit, ex: 10px. Leave empty for default value of 0px, 0px, 0px, 0px.
Box ShadowSet to "Yes" to enable box shadows.
Box Shadow PositionSet the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.
Box Shadow Blur RadiusSet the blur radius of the box shadow. In pixels.
Box Shadow Spread RadiusSet the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.
Box Shadow ColorControls the color of the box shadow.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start. Default currently set to Top Of Element Hits Bottom Of Viewport.

In this article