Audio Element

Add Self Hosted Audio Anywhere

Buy Avada
Discover More
Prebuilt Websites

Self-Hosted Audio For Your Content

Integrate your own audio directly into your website with our Audio Element, built into Avada Builder and Avada.

Player Control

With the Audio Element you have full control over how the video plays and displays.

  • Loop Your Audio

  • Autoplay or Not

  • Audio Pre-loading Options

Design Options

You also have full control over the array of design options on offer with the Video Element.

  • Add a Background Color

  • Light or Dark Controls Color Scheme

  • Audio Progress Bar Color

  • Set Player Width

  • Set Border Size and Border Radius

  • Add Box Shadow

The Avada: Website Builder


The Avada Website Builder gives you the ability to design and build any layouts for your Avada website. Choose to customize the Footer, single posts, Portfolio posts, archives, search results, and more. With the power of Layouts, Layout Sections, Conditional Logic, Layout Section Elements, and Avada’s massive range of Design Elements, the sky is the limit. Custom design a global footer or only apply the custom Footer to a single page or post.


Advanced Options Network

Avada Global Options are global, Page Options are individual. This setup gives you amazing creative flexibility that becomes indispensable when you start creating your site. Having the option to freely choose how individual pages are styled is an incredible freedom.


The #1 Selling WordPress Theme Of All Time


Individuals & Businesses Trust Avada


Documentation & Videos

We have a wide range of support material to suit your learning style. Our documentation is extensive and growing. There are almost 500 documents, where you can search and read about almost any aspect of Avada. Prefer to watch? We have a growing library of HD video tutorials covering the basics and much, much more. Like to engage? Submit a support ticket, join our Community Forum, or engage with other users on the community run Facebook Avada Users Group.


Start Searching

Video Tutorials

Start Watching

Need Support?

Start Engaging

Customize Elements Globally Or Individually

Elements can be controlled globally inside of the Avada Global Options, or individually per Element by changing the options for each once added to a page or post. Individual Element options will always override the global options. This flexibility gives you the ultimate freedom to style Elements and content that is unique and will stand out from the rest of the site.

General Options

  • Audio – Upload an audio file.
  • Loop – Turn on to loop the media.
  • Autoplay – Turn 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.

Design Options

  • Background Color – Controls the background color for the audio player. Leave empty for default value of #222222.
  • Controls Color Scheme – Depending 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 Color – Select a color for the audio progress-bar. Leave empty for default value of #ffffff.
  • Maximum Width – Set the maximum width using a valid CSS value.
  • Border Size – Set the border size. In pixels. Default currently set to 0.
  • Border Color – Controls the border color for the audio player.
  • Border Radius – Enter values including any valid CSS unit, ex: 10px. Leave empty for default value of 0px, 0px, 0px, 0px.
  • Box Shadow – Set to “Yes” to enable box shadows.
  • Box Shadow Position – Set 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 Radius – Set the blur radius of the box shadow. In pixels.
  • Box Shadow Spread Radius – Set 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 Color – Controls the color of the box shadow.