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..
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
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.
Controls Color SchemeDepending on the background color you can change this value to "Light" or "Dark" to ensure controls are visible.
Audio Progress ColorSelect a color for the audio progress-bar.
Maximum WidthSet the maximum width using a valid CSS value.
Border SizeSet the border size. In pixels.
Border ColorControls the border color for the audio player.

In this article